如何禁用父级悬停时，悬停在孩子上面 [英] How to disable parent hover, when hovering over child

问题描述

我有什么？


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'））{
 //您的孩子跨度被徘徊
 e.stopPropagation（）; 
} else if（$（e.target）.is（'。przycisk'））{
 //您的父元素悬停在$ b上$ b} 
}）; 
  

解决方案

我想我找到了一些相当快速的解决方案。

  $（'。deHover'）。hover（function（）{
 $（this）.parent（） .css（'background-color'，'＃008000'）; 
}，function（）{
 $（this）.parent（）。css（'background-color'，'＃383' ）; 
}）; 
 $ b $（'。przycisk'）。hover（function（）{
 $（this）.css（'background-color'，'＃383'）; 
} ，function（）{
 $（this）.css（'background-color'，'＃008000'）; 
}）; 
  

对于我想要禁用父级悬停的任何事情，我都会添加 deHover 类，它只是改变mousein / mouseout上的父级背景颜色。但我还需要记住让父项悬停（进出）工作，所以我也为它添加了一个jQuery。

这里 是jsfiddle来检查它是否有效。没有发现任何抱怨。

I will try to show my problem on some simple example.

What I have?
http://jsfiddle.net/JGzSh/3/
Here is some simple button, which will have onlick events later. When i hover over green div (parent), :hover works changing its color a bit.

What's the problem?
The problem is, when I hover over yellow part, i want to change background of yellow element, but i don't want to parent :hover to work.

Question
So how can i disable parent :hover when hovering over child? (so parent's background will go back to starting color?)

Those are only css rules about hovering so far

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

What have I tried so far?
Thats most important question, I know. I did some research, and so far i found some solutions which could help me, but they all use jQuery, and my question is, if its possible to do it in CSS only, to keep it as simple as possible?

Example of solution in jQuery found in google:

$('.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
    }
});

解决方案

I think i found some pretty quick solution for that.

$('.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');
});

To everything what I want to be disabling parent hover, I add deHover class, and it just changes parent background color on mousein/mouseout. But i also need to remember to make Parent hover (in and out) work, so i added an jQuery for it also.

Here is jsfiddle to check if it works. Didn't find anything to complain about.

这篇关于如何禁用父级悬停时，悬停在孩子上面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！