CSS悬停在一个div上，但如果悬停在它的子元素上则不起作用。

Question

我查看过这个问题是否已有答案，但没有找到任何东西，只有有关我正在寻找的相反的CSS规则的问题。

我有一个包含一个或多个子元素的div，并且我希望在悬停时更改其背景，但如果悬停在其子元素之一上，则不更改背景；我需要: hover规则仅限于元素本身，而不是它所包含的后代。由于CSS中不存在父级规则，并且在鼠标经过父级和子级时触发:hover，我想不出任何办法，也许只用CSS无法实现此结果。 然而，这个问题是关于CSS的，因此不需要JS或JQuery解决方案（我可以自己提供）

代码：

HTML

    <div class="parent">Text of the parent
        <p class="class1">I do not need to trigger parent's background color change!</p>
    </div>

CSS

    .parent {
       background: #ffffff;
    }
    .parent:hover {
       background: #aaaaff;
    }
    .class1 {
       margin: 10px;
    }

- Nillus

Answer 1

您可以通过将此属性添加到子类CSS中轻松实现此操作。

pointer-events: none;

这对我起作用了。

- sam thomas

---

这似乎适用于我在Safari中的情况。 - Code Commander

这种方法似乎会禁用应用在它上面的元素的所有事件。 - The Oracle

我的朋友，你是天才 :) - Ben Tayaa

这个按预期工作，谢谢。 - Lewis Morris

Answer 2

2023 年更新：现在所有主流浏览器都支持使用 :has() 伪类实现此功能（可能需要检查您的浏览器版本）。因此，您现在可以这样做：

.parent:hover:not(:has(*:hover)) {
  background: red;
}

<div class="parent">Something to hover of the parent
    <p>Child content: hovering me does not trigger the parent's hover!</p>
</div>

目前我们还没有CSS选择器能够实现当鼠标悬停在子元素上时停止父元素的悬停效果，这是最接近无需JavaScript的方法。该方法会同时影响父元素和子元素的悬停样式，但只有当子元素的宽度和高度都占满父元素时才有效。

- Zach Saucier

---

今天你有什么建议？ - user3025289

@Lonely 关于这个问题还没有任何改变。仍然有关于此类事情的讨论（主要是通过 :has 选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/:has），但尚未实现。 - Zach Saucier

谢谢过去的Zach！我们确实在未来的所有浏览器中都有这个功能。 - Konrad G

Answer 3

Fiddle 基于 这个答案:

（说明：本段为HTML代码，无需翻译）

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

在这种情况下，你应该使用JavaScript。正如Zack Saucier所说，纯CSS目前真的无法实现。

- CREEATION

Answer 4

你不能仅使用 CSS 来实现这个，但是用 jQuery 很容易实现。 因此，当你悬停在一个子元素上时，你不想修改父元素。

https://jsfiddle.net/8nqfLgsk/2/

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

});   

基本上，你只是在悬停在元素上时向其添加一个类，而不修改父级。

- Mike

---

首先，你在谈论哪个版本的CSS？ - Playdome.io