将鼠标悬停在父级但不影响子元素[重复]

Question

这个问题在这里已有答案：

• CSS on parent hover keep child not filter-grayscaled 4个答案

我正在尝试变暗，将父div元素放在里面（这是子元素）。该

当悬停时，父元素变暗会影响元素，并且字体的颜色也会变暗，这不是我想要实现的（颜色为

元素应该是明亮的默认值）。

.parent {
  background-color: lightgrey
}

.parent:hover {
  filter: brightness(50%); //this affects also child element
}

<div class="parent">
  <p class="children">Paragraph</p>
</div>

Answer 1

要只影响孩子，你可以这样做：

.parent, .children {
  background:white;
} 
.parent:hover {
  background: black; //this affects the parent and the child
}
.parent:hover .children {
  background: white; //this affects only child
}

所以你正在做的是压倒孩子们的徘徊，所以就像你排除孩子一样。所以会发生的是两个都是白色的，你在父母身上盘旋，它们都变黑了，但是立刻被.parent:hover .children覆盖，所以孩子们保持白色。