通过悬停父div来设置特定子元素的样式

Question

虽然可以使用javascript或任何客户端脚本来完成，但是是否可以在将父元素悬停在CSS中时仅悬停特定的子元素？

<style>
 .p{//some style...}
 .p:hover{//change style of child having class c2}
</style>
<div class="p">
 <span class="c1"></span>
 <span class="c2"></span>
</div>

Answer 1

您只需要在.c2选择器之后传递:hover：

.p:hover .c2{//change style of child having class c2}

修改

如果您只想悬停孩子，则需要将:hover添加到子元素而不是父元素：

.p .c2:hover{//change style of child having class c2}