CSS lighten child elements on parent mouseover

Question

here is my problem.
I have a div which contains two other divs: basically one for header, one for content.

I'd like to lighten (change alpha level, or some other method is welcomed), when the user points the mouse over the parent div. Colors of both child divs should change and become slightly lighter. I'd like to avoid javascript if possible.

How to do this in CSS?

score 86 · Accepted Answer · answered Mar 04 '11 at 21:05

86

Like this?

Live Demo

Relevant CSS:

#container:hover .inner {
    opacity: 0.8
}

HTML:

<div id="container">
    <div id="left" class="inner"></div>
    <div id="right" class="inner"></div>
</div>

Irrelevant CSS:

#container {
    width: 300px;
    padding: 30px;
    overflow: hidden
}

.inner {
    width: 40%;
    height: 250px;
    background: #ccc
}
#left {
    float: left
}
#right {
    float: right
}

Truly Irrelevant CSS:

#container {
    background: #fcecfc; /* old browsers */
    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* ie */
}

answered Mar 04 '11 at 21:05

thirtydot

224,678
48
389
349

btw. how can I change the opacity only of the background color, so that it doesn't affect text color? – ZolaKt Mar 04 '11 at 21:14
@ZolaKt: Use an `rgba` background: [http://jsfiddle.net/thirtydot/NHbn8/1/](http://jsfiddle.net/thirtydot/NHbn8/1/) - [see here](http://stackoverflow.com/questions/4788564/transparency-and-text-problem/4788642#4788642) for how to do it cross browser. – thirtydot Mar 04 '11 at 21:18
@ZolaKt: http://jsfiddle.net/thirtydot/NHbn8/2/ ? Edit: You deleted that last comment, so I guess you figured it out yourself. – thirtydot Mar 04 '11 at 21:28
@OmerAhmed: Sure it will. It already works in IE9+, and can be made to work in IE7-8 with minimal effort. – thirtydot Sep 16 '13 at 07:09
so simple.. so elegant! :) – ufk Jan 24 '18 at 12:43

score 24 · Answer 2 · answered Mar 04 '11 at 20:59

24

  #div:hover #div1{
     color:#lightercolor;
  }
  #div:hover #div2{
     color:#lightercolor;
  }

answered Mar 04 '11 at 20:59

Brandon Frohbieter

17,563
3
40
62

This code does that. (div1 and div2 being the children, and div being parent) :) – Brandon Frohbieter Mar 04 '11 at 21:04

score 9 · Answer 3 · answered Mar 04 '11 at 21:01

9

You can use #div:hover, perhaps?

#parent_div:hover #child_div_1 { background-color: #333; }
#parent_div:hover #child_div_2 { background-color: #666; }

answered Mar 04 '11 at 21:01

Demelziraptor

1,545
1
14
20

CSS lighten child elements on parent mouseover

3 Answers3

Linked