5

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

是）我有的？
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
    }
});
4

1 回答 1

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。

这是 jsfiddle 检查它是否有效。没发现有什么可抱怨的。

于 2013-02-26T20:30:20.490 回答