悬停在孩子上时如何禁用父悬停答案

【问题标题】：How to disable parent hover, when hovering over child悬停在孩子上时如何禁用父悬停
【发布时间】：2013-01-16 19:03:57
【问题描述】：

我会尝试用一些简单的例子来说明我的问题。

我有什么？
http://jsfiddle.net/JGzSh/3/
这是一些简单的按钮，稍后会有 onlick 事件。当我将鼠标悬停在绿色 div（父级）上时，:hover 会稍微改变它的颜色。

有什么问题？
问题是，当我将鼠标悬停在黄色部分上时，我想更改黄色元素的背景，但我不想让 :hover 工作。

问题
那么，当我将鼠标悬停在孩子上时，如何禁用父 :hover？（所以父母的背景会回到起始颜色？）

到目前为止，这些只是关于悬停的 CSS 规则

.przycisk:hover{
    background-color: #383;
}
.skrot:hover{
    background-color: red;
}

到目前为止我尝试了什么？
这是最重要的问题，我知道。我做了一些研究，到目前为止，我找到了一些可以帮助我的解决方案，但它们都使用 jQuery，我的问题是，~~是否可以仅在 CSS 中完成~~，以使其保持简单尽可能？

在 google 中找到的 jQuery 解决方案示例：

$('.przycisk').hover(function(e){
    if($(e.target).is('.skrot')){
        // your child span is being hovered over
        e.stopPropagation();
    }else if($(e.target).is('.przycisk')){
        // your parent element is being hovered over
    }
});

【问题讨论】：

您不能 (yet, until CSS4 is implemented)，因为这需要根据其后代的状态选择一个元素。使用 JavaScript 可以，但不能使用 CSS。
有一些新的选择器出现在 css 3 中，比如用于选定标签的 $，但它们还没有出来，你能做的最好的就是像 @DavidThomas 说的那样使用 javascript。
@Ark：CSS4，选择器（当前）是!，而不是$。
@DavidThomas 是 css3 的“选择器级别 4”，他们在你的链接中没有说过 css4，css3 分为模块，这是第 4 个。是的，超级选择器是！不像我说的那样，但我确定我在其他地方读过。
@Ark: 嗯，我不确定，具体来说，它看起来像是 CSS 4（鉴于 '一些 4 级选择器（上面称为“3-UI” ) 是在 [CSS3UI]' 中引入的），但它几乎完全无关紧要，所以无论哪种方式......此外，Kedor，我说这可以用 JavaScript 完成（显然，因为有 jQuery 解决方案），所以在这里:jsfiddle.net/davidThomas/JGzSh/9 注意：人们使用 jQuery 是有一个原因的，尽管这可能会被整理和优化很多。（另外，我几乎没有为 IE 做任何努力。）

标签： jquery html css hover

【解决方案1】：

我想我找到了一些非常快速的解决方案。

$('.deHover').hover(function(){
    $(this).parent().css('background-color', '#008000');
}, function(){
    $(this).parent().css('background-color', '#383');
});

$('.przycisk').hover(function(){
    $(this).css('background-color', '#383');
}, function(){
    $(this).css('background-color', '#008000');
});

对于我想要禁用父悬停的所有内容，我添加了deHover 类，它只是更改了 mousein/mouseout 上的父背景颜色。但我还需要记住让 Parent 悬停（进出）工作，所以我也为它添加了一个 jQuery。

Here 是 jsfiddle 检查它是否有效。没有发现任何可抱怨的地方。

【讨论】：