html - 如何将 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;
}

您将拥有更大的灵 active 。

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