如何在 CSS 中将鼠标悬停在子级上时禁用对父级的悬停效果？-css教程-PHP中文网

如何在 CSS 中将鼠标悬停在子级上时禁用对父级的悬停效果？

DDD

发布： 2024-11-03 20:12:29

原创

393 人浏览过

How to Disable Hover Effect on Parent When Hovering Over Child in CSS?

对子级的悬停效果禁用对父级的悬停效果

问题：

您有两个嵌套的

元素，并且您希望将鼠标悬停在父元素 .parent 上时更改其背景。然而，当你将鼠标悬停在子元素 .child 上时，你希望父元素的背景恢复到原来的状态。

解决方案：

使用纯 CSS，以前是不可能的直接达到这个效果。然而，随着最近在 2024 年引入 :has 选择器，现在可以解决这个问题：

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

登录后复制

通过定位具有悬停子元素的父元素，我们可以有效地禁用悬停当子元素悬停时对父元素的影响。

之前的有限解决方案（2024 年之前）：

在引入 :has 选择器之前，解决方法是使用同级元素实现类似的效果：

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}</code>

登录后复制

这种方法涉及创建一个位于子元素顶部的同级元素。当孩子悬停时，兄弟姐妹的背景颜色会发生变化，有效隐藏父母的背景。

以上是如何在 CSS 中将鼠标悬停在子级上时禁用对父级的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！