在悬停任何元素时,如何使用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'的颜色属性.我正在使用〜选择器,它只选择下一个兄弟姐妹.

请访问此小提琴相同的代码.

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; 
}