CSS3 / Transition / change font color on grand-grand-grand parent over
Question
I'm toying around with the CSS3 transition. I hope my question won't be too much noob and realistic :) Basically, whenever users mouse over some elements, I changed via css the color of the text.
Now the problem I have is that : I have a div box with the name of a product which is included in a span master element, which is also containing other data. I would like to change the color of my product whenever users are over the master span elements.
In order to be more accurate here is the html code :
<span class="wrapper_productbox">
<a href="P1.html" title="" class="product-image"><img src="P1.jpg" width="210" height="210" alt=""/></a>
<div class="categoryProductBox">
<div class="product-name">
<a href="P1.html" title="PRODUCT NAME">PRODUCT NAME</a>
</div>
</div></span>
So to sum up I would like to know if there is a way in CSS to change the font color of the product-name a element whenever users mouse over the master wrapper_productbox element or the product-image a element.
Thank you very much for your help :)
Solution
Two Choices
Each slightly different.
This will activate hovering over even the white space in the .wrapper_product
box (Fiddle Example):
.wrapper_productbox:hover .product-name a {
color: red;
}
This will only activate hovering over the two a
tags inside the .wrapper_productbox
(Fiddle Example):
a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
color: red;
}
OTHER TIPS
Here's the DEMO Used a bit of Jquery. If you prefer pure css you have to re constructure your html code a little bit and definitely to wrap your section with a div not span because the span will have a very short height and will not respond to your hover even.
$('.wrapper_productbox').hover(
function() {
$('.product-name a').css('color','green');
},function() {
$('.product-name a').css('color','#000');
}
);