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中时才有效。怎么了？我想尽可能只使用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才能做到这一点。

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

1 个答案: