Nested Div hover question

Question

I have 3 html div like this:

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2"></div>
</div>

I want when I hover on MainDiv or nestedDiv1 , I set color 1 for MainDiv and color 2 for nesteddiv2 , then when I hover on nesteddiv2 I change the backgroundcolor of nesteddiv2 and MainDiv.

I prefer to do it with CSS, I know the javascript way.

Thanks Mazdak

Quentin · Accepted Answer · 2010-12-20 09:08:03Z

2

There is no way, in CSS, to target an element using a selector that includes one of its descendents. So while the first half is trivial to achieve, the second half is impossible.

Use JavaScript if it matters that much.

answered Dec 20, 2010 at 9:08

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Chinmayee G · Accepted Answer · 2010-12-20 09:18:17Z

0

For given HTML you can do with following CSS

#MainDiv:hover{
    color:red;
}

#MainDiv div#nesteddiv1{
    color:gray;
}

#MainDiv div#nesteddiv1:hover{
    color:blue;
}

#MainDiv div#nesteddiv2{
    color:yellow;
}

#MainDiv div#nesteddiv2:hover{
    color:green;
}

Note: This will not work in IE as it supports hover only on a tag.

answered Dec 20, 2010 at 9:18

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Comments

Kyle · Accepted Answer · 2010-12-20 09:18:44Z

0

There is no way to select an element from another, it's just not possible.

But you can do this with jQuery like this:

$(function() {
    $("#div1").hover(function() {
        $("#show-hide").toggleClass('highlight');
    });
});

I have made an example for you here.

answered Dec 20, 2010 at 9:18

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Comments

kikito · Accepted Answer · 2010-12-20 09:39:44Z

The only way of doing that with CSS only is using an extra div to cover maindiv when the hover happens. And it would not work on IE < v9, since it would need z-index

This would be the markup

<div id="MainDiv">
  <div id="nesteddiv1"></div>
  <div id="nesteddiv2">
    <div id="extradiv"><div>
  </div>
</div>

The CSS would be very tricky.

(disclaimer: this hasn't been tested - probably you would need more rules)

MainDiv would have to be position:relative or position:absolute, fixed width and height, and z-index = -1.
Nested divs 1 and 2 can NOT be position:relative or absolute, and z-index = 1
Extra div would have to be: position:absolute, top:0, left:0, and same witdth and height as MainDiv, display:hidden, and z-index = 0
#nexteddiv2:hover #extradiv would have display:block

z-index would make maindiv stay allways behind the others, while nested divs 1 and 2 always stay on top. extradiv would be between them, 'covering' maindiv, but only when nesteddiv2 is hovered.

A drawback of this method would be that extradiv would be visible until you stopped hovering it, not just nesteddiv2.

Collectives™ on Stack Overflow

Nested Div hover question

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related