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

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选择器目前无法在孩子悬停时停止元素的悬停效果,这与我们可以在没有javascript的情况下得到的接近 - 除了影响父级之外还会影响孩子的悬停.这仅在孩子是父母的宽度和高度的100%时才有效

在CSS4草案中有一个父选择器!,可以在如下情况下使用:

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

但我们还没有这种能力