css - 在悬停任何元素时，如何使用 CSS3 选择器选择所有同级元素？

Question

考虑下面给定的 HTML。

<ul class="chars_container">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS:

.chars_container{
    list-style-type: none
}

.chars_container li{
    float : left ;
    margin: 20px ;
    font-size : 50px;
    color : #f00;
}

.chars_container li:hover ~ li{
       color : #0f0; 
}

在悬停任何“li”时，我想更改所有兄弟“li”的颜色属性。我正在使用 ~ 选择器，它只选择下一个所有 sibling 。

请访问此 fiddle对于相同的代码。

Answer 1

如果你想拥有类似 的东西Demo

css

.chars_container:hover > li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}

或者

.chars_container:hover li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}