更改 div 的内容：鼠标悬停在另一个 div 上之前不起作用

Question

我按照这个例子 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 不在另一个 div 内时才有效。怎么了？如果可能的话，我希望只使用 css 来做到这一点。

Answer 1

.container1 .container2:hover ~ .test2 .text2:before

它不起作用，因为.container2 不是.test2 的兄弟元素。它的父级.container1，是一个兄弟姐妹，因此以下方法可以工作：

（~ 是一个通用的兄弟组合器 - 它只查看兄弟元素。）

.container1:hover ~ .test2 .text2:before{
    content: 'Text2 Hover';
    color: green;
}

恐怕您尝试做的事情在纯 CSS 中是不可能的，因为您无法穿越 DOM 并且存在 no parent selectors。你需要 JS 来做到这一点。