CSS3 / Transición / cambiar el color de fuente en el tatarabuelo

Question

Estoy jugando con la transición CSS3.Espero que mi pregunta no sea demasiado novata y realista :) Básicamente, cada vez que los usuarios pasan el mouse sobre algunos elementos, cambié mediante CSS el color del texto.

Ahora el problema que tengo es que:Tengo un cuadro div con el nombre de un producto que está incluido en un elemento maestro de intervalo, que también contiene otros datos.Me gustaría cambiar el color de mi producto cada vez que los usuarios se encuentren sobre los elementos principales.

Para ser más preciso aquí está el código 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>

Entonces, para resumir, me gustaría saber si hay una manera en CSS de cambiar el color de fuente del elemento de nombre de producto cada vez que los usuarios pasan el mouse sobre el elemento master wrapper_productbox o el elemento de imagen de producto.

Muchas gracias por su ayuda :)

Answer 1

Dos opciones

Cada uno ligeramente diferente.

Esto se activará al pasar el cursor sobre incluso el espacio en blanco en el .wrapper_product caja (Ejemplo de violín):

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

Esto sólo se activará al pasar el cursor sobre los dos. a etiquetas adentro el .wrapper_productbox (Ejemplo de violín):

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

Answer 2

Aquí está la demostración usó un poco de jQuery.Si prefiere CSS puro, debe establecer un poco su código HTML y definitivamente para envolver su sección con un DIV no SPAN porque el span tendrá una altura muy corta y no responderá a su flujo.

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