Question

我正在尝试将父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覆盖，因此孩子们保持白色。

将鼠标悬停在父元素上但不影响子元素

1 个答案: