Hover on a div, in a div with hover

Question

I have a div enclose in another div. Two of them have an hover effect. Is it possible to unactive parent div hover effect when i'm on the other div ?

Exemple here : when my mouse in on the blue div, i want to cancel hover in the red div without change on my hierarchy.

http://jsfiddle.net/ynj9t2kf/

.div1:hover{
    background:yellow;
}
.div2:hover{
    background:green;
}

With CSS alone, and not changing the hierarchy, you can't. If you can change the hierarchy, you can do it like this http://jsfiddle.net/j08691/75ovqsgd/ — j08691, Apr 10 '15 at 14:01
Thanks ! But i can't change the hierarchy here, i thought it was possible to do it with CSS alone :/ — Anti, Apr 10 '15 at 14:04
You said you can't change the hierarchy but you accepted the answer that requires that you add another element? OK. Well, if you want a jQuery answer here's one http://jsfiddle.net/j08691/ynj9t2kf/22/ — j08691, Apr 10 '15 at 14:15
Ok sorry, didn't mean to accept the wrong answer, but i thought no one will answer a jQuery solution. Btw, ty you for your anwser j08691 ! — Anti, Apr 10 '15 at 14:38
If it works for you then it's not the wrong answer, but you might want to edit the question to remove the can't change the hierarchy restriction. And if you decide to go the jQuery route let me know and I'll post my comment as an answer. — j08691, Apr 10 '15 at 14:39

Fabrizio Calderan · Answer 1 · 2015-04-10T14:25:16.507

Since there's no parent selector in CSS, you could use a workaround and apply a red outline to the .div2 when hovered and set an overflow: hidden to .div1, e.g.

.div1 {
    ...
    overflow: hidden;
}

.div2 {
   ...
}

.div1:hover{
   ...
}

.div2:hover {
    ...
    outline: 999em red solid ;
}

Example: http://jsfiddle.net/924zuneu/

With this approach when you hover .div2 the outer div still applies a yellow background, but the outline will cover it.

Another approach is to style a pseudoelement of .div2, e.g.

.div1 {
    ...
    position: relative;
    z-index: 1;
}

.div2 {
   ...
}

.div1:hover {
   ...
}

.div2:hover{
   ...
}

.div2:hover:before {
   content    : "";
   background : red;
   position   : absolute;
   z-index    : -1;
   pointer-events: none;
   top: 0; left: 0; right: 0; bottom: 0;
}

Here pointer-events is needed otherwise when you leave the .div2 you wouldn't see the hover effect for .div1

Example: http://jsfiddle.net/kr4453bj/3/

Result (for both methods)

when .div1 is hovered

enter image description here

when .div2 is hovered

enter image description here

Thank you for the little trick, but i was looking for a cleaner method ... By the way if this is not possible with CSS, I'll do it with JQuery — Anti, Apr 10 '15 at 14:07
so you may add `jQuery` tag to your question. Anyway unless you have specific reason to use a js approach don't discard at all a pure css workaround like this. — Fabrizio Calderan, Apr 10 '15 at 14:09

score 0 · Accepted Answer · answered Apr 10 '15 at 14:46

There's no clean CSS-only way to do this. If you desire a jQuery method you could do it this way:

$('.div2').hover(function (e) {
    e.stopPropagation()
    $(this).addClass('green')
}, function () {
    $(this).removeClass('green')
})
$('.div1').mouseover(function () {
    $(this).addClass('yellow')
}).mouseout(function () {
    $(this).removeClass('yellow')
})

.div1 {
    width:200px;
    height:200px;
    background-color:red;
}
.div2 {
    width:50px;
    height:50px;
    background-color:blue;
}
.yellow {
    background:yellow;
}
.green {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
    <div class="div2"></div>
</div>

score -1 · Answer 3 · answered Apr 10 '15 at 14:04

May be useful for you

.div1 {
width:200px;
height:200px;
background-color:red;
}
.div2 {
width:50px;
height:50px;
background-color:blue;
position:absolute;
top:0px;
}
.div1:hover {
background:yellow;
}
.div2:hover {
background:green;
}
body {
margin:0;
}

Hover on a div, in a div with hover

3 Answers3