CSS3 hover on nested divs

Question

I have mutlilevel nested divs. Each div has a span in it.

<div>
    <span>AA</span>
    <div>
        <span>BB</span>
        <div>
            <span>CC</span>
        </div>
    </div>
</div>

If I hover a div, the spans css should get another background. This works pretty well, as long as i hover the most outer div, containting the AA span. But the problem is, if i hover the middle div, containing the BB span, the outer div hovers as well. If i hover the CC span div all three spans get the background.

What I want is, that only the one div which the mouse points at is hovered. I look preferably for a CSS solution, but jQUery would be great as well.

Here is a simplified jsfiddle of the problem: http://jsfiddle.net/FufRg/

Is it an option to use 3 seperate divs instead of nested divs? JSFiddle — Menno
– Menno, Commented May 15, 2013 at 8:37

shuji · Accepted Answer · 2013-10-26 19:50:45Z

1

In jquery this is easy. just stop propagation. jsFiddle

$("div").on("mouseover",function(e){
    $(this).children("span").css("background","#AAA");
    e.stopPropagation();
});
$("div").on("mouseout",function(){
    $(this).children("span").css("background","");
});

answered Oct 26, 2013 at 19:50

shuji

7,5657 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

edonbajrami · Accepted Answer · 2013-05-15 08:52:00Z

I have create an example and it works for me. I have added jQuery and jQuery UI for background animation:

HTML:

<div class="a">
  <span>AA</span>
   <div class="b">
    <span>BB</span>
     <div class="c">
        <span>CC</span>
    </div>
</div>

CSS:

<style>

    .a{width: 400px;
         height: 400px;
         background: #000;}

    .b{width: 300px;
         height: 300px;
         background: #ddd;}

    .c{width: 200px;
         height: 200px;
         background: #efefee;}

</style>

jQuery:

<script>
$(document).ready(function(){


$('.a').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'red'},400);

});

$('.b').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'blue'},400);

});

$('.c').hover(function(){

    $(this).find('*').animate({'backgroundColor': 'yellow'},400);

});

});
</script>

Tbi45 · Accepted Answer · 2013-05-15 15:51:21Z

0

Think in this way. If you enter a house, than into a room, than into the bed you are still in the house-> in the room -> in the bed. You cant say you are only in the bed, or only in the room. I think you get my point. If you hover over the CC div the hover will trigger on all the divs because you are already over the AA div and the bb div. The best solution is to use separate divs, not nested. Like Aquillo said.

edited May 15, 2013 at 15:51

answered May 15, 2013 at 8:42

Tbi45

6072 gold badges6 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS3 hover on nested divs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related