Question

<div class="a">
     <div class="b"></div>
     <div class="c"></div>
     <div class="d"></div>
</div>

我想在班级c上悬停时对班级b进行一些更改。这是我的代码。

1）

.c:hover ~ .b {
  #style
}

2）

.a > .c:hover ~ .b {
  #style
}

1＆amp; 2不适合我。我错过了什么吗？

Answer 1

我想，用css做这样的事是不可能的。您可能需要一些Javascript。

Answer 2

使用

    .c:hover + .b {
       #style
    }

代替。

Answer 3

css ~方法仅适用于第一个选择器div之后的元素。您可以使用jquery悬停功能来实现您想要的效果。以下是fiddle的示例。

Answer 4

你可以尝试这样的事情，你改变元素的顺序，并使用相对定位使它看起来像正确的顺序，然后使用下一个兄弟选择器。

<div class='a'>
    <div class='c'>
    </div>
    <div class='b'>
    </div>
    <div class='d'>
    </div>
</div>

.b, .c, .d {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
.b {
    background: yellow;
    position: relative;
    bottom: 102px;
}
.c {
    background: red;
    position: relative;
    top: 102px;
}
.d {
   background: blue;
}

.c:hover ~ .b {
    background: purple;
}

悬停的css选择器〜

4 个答案: