CSS 在div上悬停，而不是在子元素上悬停

在本文中，我们将介绍如何在CSS中实现在div元素上悬停时的效果，但当悬停在子元素上时不触发。

阅读更多：CSS 教程

CSS :hover 伪类

在CSS中，:hover 是一个伪类选择器，它可以用于在鼠标悬停在元素上时应用样式。使用:hover伪类可以在悬停过程中更改div的样式，以达到想要的效果。

示例：

<div class="container">
  <div class="inner">
    <p>这是一个子元素</p>
  </div>
</div>

.container:hover {
  background-color: yellow;
}

.inner {
  background-color: lightblue;
}

.inner:hover {
  background-color: lightgreen;
}

在上面的示例中，当鼠标悬停在.container元素上时，整个div元素的背景色将更改为黄色。而当鼠标悬停在.inner元素上时，只有.inner元素的背景色会更改为浅绿色。

CSS pointer-events 属性

如果我们不希望当鼠标悬停在子元素上时触发父元素的样式改变，我们可以使用CSS的pointer-events属性。

pointer-events属性指定元素是否应该响应鼠标事件，包括悬停事件。通过将pointer-events属性设置为none，我们可以禁止子元素对鼠标事件的响应。

示例：

.container {
  background-color: yellow;
}

.container:hover {
  background-color: red;
}

.inner {
  background-color: lightblue;
  pointer-events: none;
}

.inner:hover {
  background-color: lightgreen;
}

在上面的示例中，当鼠标悬停在.container元素上时，整个div元素的背景色将更改为红色。但当鼠标悬停在.inner元素上时，即使它是.container的子元素，它的背景色不会更改为浅绿色。

CSS 继承

另一种方法是使用CSS的继承机制来实现悬停在div上时改变背景色，而在子元素上悬停时保持原样。

示例：

.container {
  background-color: yellow;
}

.container:hover {
  background-color: red;
}

.container *:hover {
  background-color: inherit;
}

.inner {
  background-color: lightblue;
}

在上面的示例中，无论鼠标悬停在container的任何子元素上，它们的背景颜色都会继承自它们的父元素，即container元素。所以，当鼠标悬停在子元素上时，它们的背景色都保持为浅蓝色，而不是改变为红色。