CSS :hover to affect all child divs

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!

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


Need Your Help

Using OpenGL textures larger than window/display size

opengl textures

I'm having problems using textures that are larger than the OpenGL window or the display size as non-display render targets.

Using QPainter over OpenGL in QGLWidget when using shaders

qt opengl overlay shader qpainter

Many of you Qt (4.6 specifically) users will be familiar with the Overpainting example supplied in the OpenGL tutorials, I'm trying to do something very similar but using shaders for the pure OpenGL

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.