如何在鼠标悬停内部按钮时禁用外部div的hover效果？

我有一个带有hover效果的外部div，内部包含一个按钮。尝试在鼠标悬停内部按钮时禁用外部div的hover效果，但未能成功。

原代码 #

CSS

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
}

.container:hover {
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button {
  padding: 10px;
  margin-top: 170px;
}

button:hover {
  cursor: pointer;
}

HTML

<div class="container">
  <button type="button">Click Me!</button>
</div>

解决方案 #

方法一：使用CSS :has选择器（适用于现代浏览器）

利用:has()选择器检测容器内按钮的hover状态，仅当按钮未悬停时，才触发容器的hover样式：

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
}

/* 仅在容器悬停且内部按钮未悬停时，应用hover样式 */
.container:hover:not(:has(button:hover)) {
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button {
  padding: 10px;
  margin-top: 170px;
}

button:hover {
  cursor: pointer;
}

方法二：JavaScript 控制类名（兼容旧浏览器）

通过监听按钮的鼠标事件，给容器添加/移除禁用hover的类，实现需求：

修改后的CSS：

.container {
  background-color: #e6e6e6;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  align-items: center;
  border: 1px solid black;
}

/* 容器没有no-hover类时，才触发hover样式 */
.container:not(.no-hover):hover {
  border: 1px solid #99ffcf;
  background-color: #bababa;
}

button {
  padding: 10px;
  margin-top: 170px;
}

button:hover {
  cursor: pointer;
}

添加JavaScript代码：

const container = document.querySelector('.container');
const button = container.querySelector('button');

button.addEventListener('mouseenter', () => {
  container.classList.add('no-hover');
});

button.addEventListener('mouseleave', () => {
  container.classList.remove('no-hover');
});

原理说明 #

• 方法一：:has(button:hover)会识别容器内是否有处于hover状态的按钮，:not()排除该场景，确保只有当鼠标悬停容器但未悬停按钮时，才应用容器的hover样式。
• 方法二：通过JS在按钮悬停时给容器加上no-hover类，让容器的hover样式失效；鼠标离开按钮时移除类，恢复原有的hover效果。

内容的提问来源于stack exchange，提问作者Sherbet Head