我遵循以下示例https://stackoverflow.com/a/19122409/2761794
请查看此jsfiddle http://jsfiddle.net/rflfn/pZr3c/
HTML：
<!-- This Works -->
<div class='container'>Mouse Over Here!</div>
<div class='test'>
<div class='text'></div>
</div>
<br />
<!-- This not Work -->
<div class="container1">
<div class='container2'>Mouse Over Here2!</div>
</div>
<div class='test2'>
<div class='text2'></div>
</div>
CSS：
/* This Works */
.test .text:before{
content: 'Text2 Normal';
color: red;
}
.container:hover ~ .test .text:before{
content: 'Text2 Hover';
color: green;
}
/* -------- */
.test2 .text2:before{
content: 'Text2 Normal';
color: red;
}
/* This not Work */
.container1 .container2:hover ~ .test2 .text2:before{
content: 'Text2 Hover';
color: green;
}
/* This not Works too */
/*.container2:hover ~ .test2 .text2:before{
content: 'Text2 Hover';
color: green;
}*/
第一个示例可以正常运行，但是第二个示例不起作用。我需要在div中将它与div一起使用，但仅在div不在另一个div内时才起作用。怎么了？我想如果可能只使用CSS来做到这一点。
.container1 .container2:hover ~ .test2 .text2:before
它不起作用，因为.container2它不是的同级元素.test2。其母公司.container1，是同级因此下面将工作：
（~是一个通用的同级组合器-它仅查看同级元素。）
.container1:hover ~ .test2 .text2:before{
content: 'Text2 Hover';
color: green;
}
恐怕您尝试做的事情在纯CSS中是不可能的，因为您无法横切DOM，并且不存在父选择器。您将需要JS来做到这一点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句