如何将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/