改变鼠标上的兄弟姐妹背景

Question

我有一个ul有3个li-s：

<ul>
    <li area="london"></li>
    <li></li>
    <li></li>
</ul>

我想做下一件事（使用CSS）：

当鼠标用属性区域覆盖li时，我想改变他所有兄弟姐妹的背景。

如果鼠标悬停不具有区域属性，则仅更改其背景。

li {
    background:rgb(237, 237, 255);
}

li[area] {
    background:rgb(237, 237, 255);
}

Answer 1

我尝试了一些东西，我想我得到了解决方案。由于您希望仅使用CSS进行此操作，因此这里是JS Fiddle Demo链接，您可以在其中看到它的实际效果。

li, 
li[area]:hover  {
background:rgb(237, 237, 255);
}

li:hover,
li[area]:hover + li,
li[area]:hover + li + li {
background: rgb(237, 237, 230);
}