Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :hover to affect all child divs

Tags:

css

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!

like image 278
DorianHuxley Avatar asked May 02 '13 21:05

DorianHuxley


1 Answers

#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

like image 158
Karl-André Gagnon Avatar answered Sep 29 '22 10:09

Karl-André Gagnon