如何为没有悬停的兄弟姐妹设置样式？答案

【问题标题】：How to style siblings that aren't being hovered?如何为没有悬停的兄弟姐妹设置样式？
【发布时间】：2020-01-24 07:36:10
【问题描述】：

我想要实现的效果是，当列表项悬停时，所有其他列表项都会淡出。

我正在寻找一种将样式应用于未悬停的元素的方法，当其中一个兄弟元素悬停时。

我已经接近了两种方法：

1.检测悬停在父级上

这样做的问题是，悬停在父元素中的任何位置，即使在锚标记之间也会导致效果。这是不可取的，它应该只在将鼠标悬停在实际列表项上时应用效果。

.d-flex {
  display: flex;
  justify-content: space-around;
}

.d-flex:hover a:hover {
  color: black;
}

.d-flex:hover a {
  color: white;
}

.d-flex a {
  color: blue;
}

<div class="d-flex">
  <div class="item"><a href="#">item 1</a></div>
  <div class="item"><a href="#">item 2</a></div>
  <div class="item"><a href="#">item 3</a></div>
  <div class="item"><a href="#">item 4</a></div>
</div>

2。使用 ~ 运算符

这很接近，但这里的问题是 general sibling combinator 只选择出现在 DOM 中的元素之后的兄弟姐妹。

.d-flex {
  display: flex;
  justify-content: space-around;
}

a {
  color: black;
}

.item:hover ~ .item a{
  color: white;
}

a:hover {
  color: blue;
}

<div class="d-flex">
  <div class="item"><a href="#">item 1</a></div>
  <div class="item"><a href="#">item 2</a></div>
  <div class="item"><a href="#">item 3</a></div>
  <div class="item"><a href="#">item 4</a></div>
</div>

请注意：我正在寻找一个 CSS 唯一的解决方案来解决这个问题。我知道它可以用 JavaScript 来实现，但是我试图避免这种方法。

【问题讨论】：

标签： html css

【解决方案1】：

你的第一种方法几乎是好的。只需考虑 pointer-events 禁用悬停在空白处并仅将其保留在链接上：

.d-flex {
  display: flex;
  justify-content: space-around;
  pointer-events:none;
}

.d-flex:hover a:hover {
  color: black;
}

.d-flex:hover a {
  color: white;
}

.d-flex a {
  color: blue;
  pointer-events:auto;
}

<div class="d-flex">
  <div class="item"><a href="#">item 1</a></div>
  <div class="item"><a href="#">item 2</a></div>
  <div class="item"><a href="#">item 3</a></div>
  <div class="item"><a href="#">item 4</a></div>
</div>

【讨论】：