CODEWITHSUNDEEP
htmlcss
Al Hennessey
Al Hennessey

Reputation: 2445

Changing the child div's font colors on parent hover

I have a question and I am not sure if it is possible, but I thought I would try asking.

Say I had three div's:

<div id="parent_div">

   <div id="child_div_1">Blue</div>

   <div id="child_div_2">Red</div>

</div>

If all text inside parent_div is set to black, how would I make the child_div_1 and child_div_2 change font-color to blue and red respectively, when the parent div is hovered over?

Sorry if this is a bit confusing, but is there a way to do this preferably with CSS only?

Upvotes: 16

Views: 25154

Answers (3)

Guffa
Guffa

Reputation: 700342

Use the :hover pseudo-class on the parent element:

#parent_div { color: black; }

#parent_div:hover #child_div_1 { color: blue; }
#parent_div:hover #child_div_2 { color: red; }

Demo: http://jsfiddle.net/Guffa/M3WsW/

Upvotes: 5

David Thomas
David Thomas

Reputation: 253318

Just target the relevant child elements based upon the :hover state of the parent:

/* defaults */
#parent_div div {
    color: #000; /* or whatever... */
}

/* hover rules */

#parent_div:hover #child_div_1 {
    color: blue;
}
#parent_div:hover #child_div_2 {
    color: red;
}

JS Fiddle demo.

Upvotes: 8

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

#parent_div:hover #child_div_1 {
   color: blue;
}
#parent_div:hover #child_div_2 {
   color: red;
}

Upvotes: 37

Related Questions