如何在悬停在子元素上时禁用父元素的悬停效果

Question

我将尝试用一些简单的示例来展示我的问题。

我有什么？
http://jsfiddle.net/JGzSh/3/
这里有一个简单的按钮，稍后会有 onclick 事件。当我悬停在绿色 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
    }
});

- Kedor

---

你现在还不能这样做（直到实施CSS4为止），因为那需要根据后代元素的状态选择元素。你可以通过JavaScript做到，但不能使用CSS。 - David Thomas

有一些新的选择器即将推出用于CSS 3，例如用于选定标签的$符号，但它们尚未发布，最好的方法是像@DavidThomas所说的那样使用JavaScript。 - Toping

@Ark：CSS4，选择器目前是!，而不是$。 - David Thomas

@DavidThomas，它是CSS3的“Selectors Level 4”，在你提供的链接中没有说它是CSS4，CSS3被分成模块，这是第4个。而且超级选择器是!而不是$，就像我之前说的一样，但我肯定在其他地方读到过。 - Toping

@Ark：嗯，我不确定，看起来它是CSS 4（鉴于“某些Level 4选择器（在[CSS3UI]中标注为“3-UI”）被引入”这一澄清），但它几乎完全无关紧要，所以无论如何...此外，Kedor，我说过这可以用JavaScript完成（显然，因为有jQuery解决方案），所以在这里：http://jsfiddle.net/davidThomas/JGzSh/9/ 注意：人们使用jQuery的原因是有道理的，尽管这可以整理和优化很多。（另外，我几乎没有努力迎合IE。） - David Thomas

我知道已经有一段时间了，但我一直在寻找其他解决方案，也没有时间去查看整个代码，因此我没有回答。现在我有时间了，所以这很好用，如果您可以将其写为答案，我会接受它。谢谢。我只是好奇，在 CSS 的末尾 [class=undefined]::after 是做什么的 ;) 不管怎样，再次感谢 - Kedor

Answer 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类，它只会在鼠标进入/离开时更改父级背景颜色。但是我还需要记得使父级悬停（进入和退出）正常工作，因此我也添加了一个jQuery来实现它。 这里是jsfiddle，可以检查它是否有效。没有发现任何问题。

- Kedor