CSS悬停在div上，但如果悬停在他的孩子身上，则不会 [英] CSS hover on a div, but not if hover on his children

问题描述

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

我有一个问题包含一个或多个孩子的div，我希望它在悬停时更改其背景，但是如果将它的一个孩子徘徊，则不会。我需要将：hover规则限制为纯元素，而不是其包含的后代。不是CSS中的父母规则，当鼠标经过父母及其子女时，鼠标悬停触发，我发现自己没有想法，也许这个结果是不可能用CSS实现的。
然而，问题是关于CSS，所以不需要JS或JQuery解决方案（我可以自己提供）

我事先感谢您的任何想法或建议

代码：

HTML

 < div class =parent>父母的文本
< p class =class1>我不需要触发父母的背景颜色变化！ ; / p为H. 
< / div> 
  

CSS

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

解决方案

当孩子徘徊时悬停效果目前不可能用我们的CSS选择器，这个距离我们可以很近没有JavaScript - 影响悬停的孩子，除了影响父母。如果孩子是父母的宽度和高度的100％，这将仅适用。

在 CSS4草稿中有一个父选择器！，可以在如下情况下使用：

  .parent！ .class1：hover {
 background：#ffffff; 
} 
  

但我们还没有这种能力

I looked if this question had already been answered, but couldn't find anything, only questions on the reverse css rule I am looking for.

I have a div that contains one or more child, and I want it to change its background on hover, but not if hovering one of its children; I need the :hover rule to be restricted to pure element, not its offsprings it contains. Being not a parent rule in CSS, and being :hover triggered whenever the mouse passes over the parent AND its children, I find myself out of ideas, and maybe this result is impossible to achieve with only CSS. However, the question is about CSS, so no JS or JQuery solution is needed (I can provide that by myself)

I thank you in advance for any ideas or suggestions

Code:

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;
    }

解决方案

The ability to stop an element's hover effect when the child is hovered is not currently possible with the CSS selectors that we have, this is as close as we can get without javascript - affecting the child on hover in addition to affecting the parent. This will only work if the child is 100% of the width and height of the parent

In the CSS4 draft there is a parent selector ! which could be used in cases like this as follows:

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

But we don't have that capability yet

这篇关于CSS悬停在div上，但如果悬停在他的孩子身上，则不会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！