CSS3 / Transition / changer la couleur de la police sur l'arrière-grand-grand-parent

Question

Je joue avec la transition CSS3.J'espère que ma question ne sera pas trop noob et réaliste :) En gros, chaque fois que les utilisateurs passent la souris sur certains éléments, je change via CSS la couleur du texte.

Maintenant, le problème que j'ai est le suivant :J'ai une boîte div avec le nom d'un produit qui est inclus dans un élément span master, qui contient également d'autres données.Je souhaite changer la couleur de mon produit chaque fois que les utilisateurs dépassent les éléments maîtres.

Afin d'être plus précis voici le code html :

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

Donc, pour résumer, j'aimerais savoir s'il existe un moyen en CSS de changer la couleur de la police de l'élément product-name a chaque fois que les utilisateurs passent la souris sur l'élément master wrapper_productbox ou sur l'élément product-image a.

Merci beaucoup pour votre aide :)

Answer 1

Deux choix

Chacun légèrement différent.

Cela activera le survol même l'espace blanc dans le .wrapper_product boîte (Exemple de violon):

.wrapper_productbox:hover .product-name a {
    color: red;
}

Cela n'activera que le survol des deux a Mots clés à l'intérieur le .wrapper_productbox (Exemple de violon):

a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
    color: red;
}

Answer 2

Voici la démo a utilisé un peu de jQuery.Si vous préférez Pure CSS, vous devez construire votre code HTML un peu et définitivement pour envelopper votre section avec une DIV NON SPAN, car la portée aura une hauteur très courte et ne répondra pas à votre planer même.

$('.wrapper_productbox').hover(
    function() {
    $('.product-name a').css('color','green');
    },function() {
    $('.product-name a').css('color','#000');
    }
);