0302伪类hover使用的一个问题

关于伪类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的父级是空的，没有意义，鼠标悬停无法找到对象。