在悬停元素时更改列表（ul）的所有其他元素li的css属性

Question

我真的想知道是否可以在悬停其中一个元素的同时更改列表中所有其他元素的属性。

让我们说当我悬停“元素2”时，我希望其他人：“元素1”，“元素3”和“元素4”css颜色属性变为“红色”而不是悬停的那个。

有没有可能只用css？那个实际的功能有一个css选择器吗？

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
<ul>

Answer 1

您可以使用父li上的伪类:hover更改所有ul子项的颜色。

然后你只需要覆盖当前悬停的孩子并将其设置回原始颜色：

ul:hover > li {
 color: red;
}

ul > li:hover {
  color: black;
}

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ul>

Answer 2

您可以尝试使用父选择器

ul:hover li { color:red; }
ul li:hover { color:white;} // that should be default color

Answer 3

是的，有可能使用:not否定伪类。

#list > .element:not(:hover) {
  color: red;
}

<ul id="list">
    <li class="element">element 1</li>
    <li class="element">element 2</li>
    <li class="element">element 3</li>
    <li class="element">element 4</li>
<ul>

Answer 4

试试这个

<ul id="list">
    <li class="element">element 1</li>
    <li class="element">element 2</li>
    <li class="element">element 2</li>
    <li class="element">element 4</li>
<ul>
<style>
#list:hover{
    color:red;
}
 .element:hover {
    color: black; /* Replace black with Default color */
}
</style>

这对我有用

Answer 5

无法使用CSS遍历DOM，但对于您的示例，您可以像这样伪造它。

#list {
  background-color: gray;
  list-style-type: none;
  padding: 0;
}
#list:hover {
  background-color: red;
}
.element:hover {
  background-color: gray;
}

<ul id="list">
    <li class="element">element 1</li>
    <li class="element">element 2</li>
    <li class="element">element 2</li>
    <li class="element">element 4</li>
</ul>

小提琴

https://jsfiddle.net/Hastig/u4w0z4sn/

这是fake it的另一种方式（影响页面上方的元素，但不是dom中的元素）。它不适用于这种情况，但对于未来的读者可能值得一提。

Answer 6

最短和最优雅的解决方案使用:not选择器：

#list:hover .element:not(:hover) {color: red}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
<ul>

Answer 7

可以使用general sibling selector (~)定位所有跟随您当前悬停的元素的兄弟姐妹：

ul > li:hover ~ li {
  color: red;
}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
</ul>

您还可以使用adjacent sibling combinator (+)来定位紧跟在当前悬停的元素之后的兄弟元素：

ul > li:hover + li {
  color: red;
}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
</ul>

不幸的是，不可能针对以前的兄弟姐妹，所以你不能以element 2为目标并突出显示element 1。

但是，一种解决方案可能是将悬停应用于<ul>，并简单地将悬停的<li>'重置'为默认值color: inherit：

ul:hover > li {
  color: red;
}

ul:hover > li:hover {
  color: inherit;
}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
</ul>

另一个解决方案（也许是最优雅的）将是使用:not pseudo-class：

ul > li:not(:hover) {
  color: red;
}

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
</ul>

请记住，Internet Explorer 8及更早版本不支持:not。