Question

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

我拥有什么？
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
    }
});

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类，它只是在mousein / mouseout上更改父背景颜色。但我还需要记住让父母悬停（进出）工作，所以我也为它添加了一个jQuery。

Here 是jsfiddle来检查它是否有效。没有找到任何抱怨的东西。

Answer 2

您可能希望看到this question，其中讨论了嵌套CSS类。这可能允许您在.przycisk悬停时将.skrot的颜色设置为默认颜色。

当将鼠标悬停在子节点上时，如何禁用父级悬停

2 个答案: