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 :)

Answer 1

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;
}

Answer 2

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');
    }
);