... / nVoxel主页 » js/html/css » CSS中的悬停小问题

CSS中的悬停小问题

作者:T.n.T发表时间:2015-12-2本文链接:http://www.nvoxel.com/css-hover-nvoxel.html

ani-hover

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

另一方面是我遇到的小麻烦,悬停的作用范围:

例1:两个元素并列

<!--HTML结构-->

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

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

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

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

<!--HTML结构-->

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

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

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

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

了解更多:

  • 关于那些css3
    CSS3 Transform
    跨浏览器图像灰度(grayscale)解决方案
    聊聊用CSS3来玩立方体
    CSS3 Filter的十种特效
  • 关于加号选择器
    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
  •  

    评论

    (必填)


    不是'叮'的一声变成别的东西才算是奇妙,那个走得很慢很慢,慢得不像话但是非常肯定,一直都在走得钟就已经很奇妙了
    相遇 相识 相知 相爱 然后分开 / Themes by T.n.T