CSS选择器悬停~

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 &不适合我。我错过什么了吗?

Answer 1

我想，仅仅用css是不可能做到这一点的。您可能需要一点Javascript

Answer 2

use

    .c:hover + .b {
       #style
    }

。

Answer 3

css ~方法只适用于第一个选择器div之后的元素。你可以使用jquery的hover函数来实现你想要的。

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;
}