首页 > 分享发现 > CSS中的悬停注意事项

CSS中的悬停注意事项

CSS中的悬停注意事项

在一个页面上看到上边这个图片特效,尝试模拟的时候遇到了一些问题:一方面是CSS3的属性:grayscale、transition 、rotate3d rotateZ 、translate3d translate,展开太多,不详说,网上资料很全了.

 

另一方面是我遇到的小麻烦,悬停的作用范围究竟是指哪里?

两个元素并列


<!--HTML结构-->

<span>停在我上边</span>
<div class="example1">非span子元素的div,紧跟span之后</div>

<style>

/*对应CSS结构*/

div {background-color: yellow;padding: 20px;display: none;}
span:hover + div {display: block;}

</style>

此时hover到span元素上的时候,div会变色。Hover到div上,div不会变色。其中的“+”加号表示相邻兄弟选择器。

 

两个元素父子关系,不过子元素和父元素不重叠


<!--HTML结构-->
<span>停在我上边
 <div class="example2"> 
 div作为span的子元素存在,不过范围和span不重叠
 </div>
</span>

/*对应CSS结构*/

<style>

div {position:absolute;top:200px;left:200px; padding: 20px;background-color: yellow;}
span:hover div {background:red;}

</style>

此时hover到span和div元素上的时候,div都会出现变化(即使div和父元素span不重叠)。以前一直以为hover只是作用在父级上,子元素不受影响!实际不是呢~囧~

 

如果是用hover改变伪元素,则写法是"element:hover:bofore",伪元素和"hover"之间没空格。原始网页的做法是在伪元素前套一层span,然后通过"element:hover span:bofore"处理。

 

了解更多

关于那些css3

CSS3 Transform

跨浏览器图像灰度(grayscale)解决方案

 

关于加号选择器

CSS 相邻兄弟选择器

 

关于hover处理

CSS hover on a div, but not if hover on his children

Keep hover effect on child while hovering parent if child isnt inside parent

留言板 当前主题:0

留言审核后可见.

相关杂记
快递查询插件--快递管家(支持国际件,自动提醒)

双十一到了,剁手族们的购物车内肯定囤积了很多的待购商品,可以想象之后快递员又有的忙了。这里放出一个自制的浏览器插件

阅读更多>>
javascript 里的 new 操作和继承(全记录)

主要是记录下 js 里关于 new 和 继承的细节,因为网上的资料都比较分散,这里汇总下,并且加上了思考的过程。

阅读更多>>
使用CDN来加载js等文件

博客里常常会带有一些代码演示的内容,这时候就希望代码里的关键词能够高亮显示。

阅读更多>>
DOS快餐店连载系列下载

这是很早之前《电脑爱好者》杂志上连载的内容,一共12期,主要是以小故事的形式讲解了 windows 下命令行工具的使用。例如批量重命名,循环等。

阅读更多>>
ionic3 自定义图标文件(亲测可用)

首先准备好用来做图标的 svg 文件,你可以自己用 ai 画或者去网上下载就行啦,如下图所示:

阅读更多>>