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!
#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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With