如何将css应用于悬停其中一个的三个不同类

Question

这是我的代码。

<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>

当鼠标悬停在第一个div上时，我想将css应用于所有div。

Answer 1

使用当前的HTML结构，您可以使用几个兄弟选择器。

.start:hover ~ div {
    color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
    color: inherit;
}

演示：http://jsfiddle.net/3c6V6/1/

但是，如果可以，我建议更改HTML结构。例如：

<div class="start">start</div>
<div class="middles">
    <div>middle-1</div>
    <div>middle-2</div>
    <div>middle-3</div>
    <div>middle-n</div>
    <div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>

和CSS：

.start:hover + .middles > div {
    color: red;
}

你会有更大的灵活性。

演示：http://jsfiddle.net/3c6V6/2/

Answer 2

这可能就像把一个父容器放在它周围，把悬停放在那个上，或者你想直接挑出一些兄弟姐妹一样简单吗？

在这种情况下，尝试将：悬停在父容器上，如下所示：

.parent:hover div {/*style*/}

Answer 3

这是针对您在评论中找到的第二个版本： JSFiddle DEMO

div.start:hover~div.middles div:not(.end) {
    font-weight: bold;
}

（这是您原来的问题）：

div.start:hover~div:not(.end) {
    font-weight: bold;
}

<强> JSFiddle DEMO

This是我找到信息的地方。我不知道有那么多的CSS选择器。