CSS :hover to affect all child divs

Question

I have a parent div and multiple child divs inside. I want it so that if you hover over the parent div, it affects the hover state of all thechild divs in separate ways (i.e. the text of one div gets underlined, the text of another changes colour and the div that holds the image makes the image a bit lighter - only for example). How can you implement this?

Here is the code I'm currently using:

<div id='main_categories_item'> 
    <div id='main_categories_item_image'>
    <img src='http://www.ultimate-punch.com/images/small_icon/ironman.jpg'>
    </div>

    <div id='main_categories_item_text_container'>
        <div id='main_categories_item_category'>culture review</div>
        <div id='main_categories_item_short_subtitle'>Our critique of the latest Iron Man installment</div>
        <div id='main_categories_item_date'>2nd April 2013</div>
    </div>
</div>

In this I'd want #main_categories_item_category to change underline, #main_categories_item_short_subtitle to change colour and #main_categories_item_image to change opacity.

Here's the CSS I've got so far:

#main_categories_item {
    height: 100%;
    width: 100%;
    background-color: #f4f4f4;
    border-bottom: 1px solid #fff;
    padding: 10px;
    overflow:auto; 
}
#main_categories_item_image {
    float: left;
    margin-right: 10px;
}
#main_categories_item_image img {
    width: 64px;
    height: 64px;
}
#main_categories_item_text_container{
    float: right;
    width: 146px;
    height: 64px;
}
#main_categories_item_category {
    font-family: Trebuchet MS;
    font-size: 14px;
    text-transform: uppercase;
    color: #991111;
    height:17px;
}
#main_categories_item_short_subtitle {
    font-family: Trebuchet MS;
    font-size: 12px;
    color: #171717;
    height: 36px;
}
#main_categories_item_date {
    font-family: Trebuchet MS;
    font-size: 10px;
    color: #575757;
}

Thank you!

Karl-André Gagnon · Accepted Answer · 2015-05-06T12:41:21.523

7

#main_categories_item_text_container:hover
#main_categories_item_category {
    text-decoration : underline;
}

#main_categories_item_text_container:hover
#main_categories_item_short_subtitle {
    color : blue;
}

#main_categories_item_text_container:hover
#main_categories_item_image {
    opacity : 0.5;
}

That should work

edited May 06 '15 at 12:41

answered May 02 '13 at 21:55

Karl-André Gagnon

33,662
5
50
75

score 3 · Answer 2 · answered May 02 '13 at 21:56

3

You can just do it like:

#parent:hover .child:hover {
    color:red;
}

That would make .child red on hover, when hovering #parent.

answered May 02 '13 at 21:56

Trolley

2,328
2
23
28

Actually, because of the `.child:hover`, it would not do what he want to do since he want all 3 div to change when the parent is hovered. – Karl-André Gagnon May 02 '13 at 21:59
Helped me for another problem :) – Patrick Geyer Nov 04 '13 at 19:34

Joseph Orlando · Answer 3 · 2013-12-12T18:35:21.040

Rather than affecting the child by class, affect the child by type:

.parentClass div {
    height: 100%;
}

This code will affect all div's within the class parent. Using this concept, you will need some type of variable to differentiate between the three divs. For instance, if you have div A - div C and only div B has an image in it, running the following code would obviously only affect the image in div B.

.parentClass div img {
    /* make lighter */
}

I would assume that you should be able to atleast throw an id in there to differentiate, even if these div's were being created dynamically, either client-side or server-side. If that is the case, which is the worse case scenario, there are still ways of dynamically assigning id's. If you assigned an id, the following code would work

.parentClass #div1 {
    height: 10px;
}
.parentClass #div2 {
    height: 20px;
}
.parentClass #div2 img {
    /* make lighter */
}
.parentClass #div3 {
    height: 30px;
}

<div id="div2">
    <img src="images/example.png"/>
</div>

Hope that helps :)

CSS :hover to affect all child divs

3 Answers3

Linked