关于伪类hover使用时的发现的遇到的一个问题:
hover不可在同级之间使用,也不可跨级使用。需要连续的层级逐级定义。例如:
<div class="content-box3">
<div class="img">
<a href="#">
<img src="./images/pic1.jpg" width="100%">
<div class="shadow"></div>
</a>
</div>
</div>
通过CSS定义,上述的代码表示当鼠标在图片img上悬停的时候,shadow出现。
若写成:
.content-box3 img:hover .shadow{
display:block;
background:rgba(0,0,0,0.5);
}
是无效的,因为img选择器和shadow对应的div在同一层级。正确写法如下:
.content-box3 .img:hover .shadow{
display:block;
background:rgba(0,0,0,0.5);
}
这段代码将hover写在shadow的父级,所以可以有效控制。
此外,若吃class="img"这个DIV不定义样式,外观上不会影响布局。但此时hover没有办法应用。去掉class="img",用一下方式夸级定义是无效的:
.content-box3 div:hover .shadow{
display:block;
background:rgba(0,0,0,0.5);
}
因为此时shadow的父级是空的,没有意义,鼠标悬停无法找到对象。