如何将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的class start时，我想将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

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