How to disable parent hover, when hovering over child

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.