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

Question

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
    }
});

Answer 1

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.

Answer 2

You might want to see this question , which talks about nesting CSS classes. This might allow you to set .przycisk 's color to it's default when .skrot is being hovered over.