Question

我看看这个问题是否已经得到解答，但找不到任何内容，只有关于我正在寻找的反向css规则的问题。

我有一个包含一个或多个孩子的div，我希望它在悬停时更改其背景，但如果将其中一个孩子徘徊则不会;我需要：将悬停规则限制为纯元素，而不是它包含的后代。不是CSS中的父规则，并且：当鼠标经过父项及其子项时触发悬停：我发现自己没有想法，也许只有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;
    }

Answer 1

您可以通过将此属性添加到子类CSS来实现此目的。

pointer-events: none;

这对我有用。

Answer 2

当孩子被徘徊时，暂停元素悬停效果的能力目前无法使用我们拥有的CSS选择器，this is as close as we can get没有javascript - 除了影响父级外，还会影响孩子的悬停。这仅在孩子是父母

的宽度和高度的100％时才有效

在the CSS4 draft中有一个父选择器!，可以在以下情况下使用：

.parent! .class1:hover {
   background: #ffffff;
}

但我们还没有这种能力

Answer 3

Fiddle 基于this answer：

<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目前还不是真的。

Answer 4

你不能用纯CSS做到这一点，但用jQuery很容易实现。因此，当您将鼠标悬停在某个孩子身上时，您不希望修改该父母。

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

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

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

});

基本上这样，你只需要将一个类添加到你将要悬停的元素上，而无需修改父级。

CSS将鼠标悬停在div上，但如果将鼠标悬停在他的孩子身上则不会

4 个答案: