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

You can't ([yet, until CSS4 is implemented](http://dev.w3.org/csswg/selectors4/#subject)), as that would require selecting an element based upon the state of its descendant. With JavaScript you can, but not with CSS. — David Thomas, Feb 01 '13 at 13:03
there is some new selectors coming for css 3 like $ for selected tag, but they are not yet out, the best you can do is use javascript like @DavidThomas said. — Toping, Feb 01 '13 at 13:05
@DavidThomas its "Selectors Level 4" for css3, nowhere they said its css4 in your how link, css3 is divided in modules this is the 4th. and yeah the super-selector is ! not $ like i said, but im sure i read somewhere else. — Toping, Feb 01 '13 at 14:06
@Ark: hmm, I'm unsure, it looks like it is, specifically, CSS 4 (given the clarification that **'Some Level 4 selectors (noted above as "3-UI") were introduced in [CSS3UI]'**), but it's almost entirely irrelevant, so either way... Further, Kedor, I said this could be done with JavaScript (obviously, since there are jQuery solutions), so here: http://jsfiddle.net/davidThomas/JGzSh/9/ Note: there's a *reason* people use jQuery, though this could be tidied up and optimised quite a bit. (Also, I've made almost no effort to cater for IE.) — David Thomas, Feb 01 '13 at 14:38
I know it's been a while, but i was looking for other solutions, and also didnt have time to look trough whole code, so i didn't bother to answer. Now i had time, so that's working pretty well, and if you could please write it as answer, i would accept it. Thanks. I am just curious what does `[class=undefined]::after` do in the end of the css ;) anyway, thanks again — Kedor, Feb 04 '13 at 09:29

score 1 · Accepted Answer · answered Feb 26 '13 at 20:30

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.

How to disable parent hover, when hovering over child

1 Answers1

Linked