CSS3 / Transition / Cambia colore del carattere su Grand-Grand-Grand Genit

Question

Sto giocando in giro con la transizione CSS3.Spero che la mia domanda non sarà troppo noob e realistica :) Fondamentalmente, ogni volta che gli utenti mouse su alcuni elementi, ho cambiato via CSS il colore del testo.

Ora il problema che ho è che: ho una scatola div con il nome di un prodotto incluso in un elemento master Span, che contenga anche altri dati. Vorrei cambiare il colore del mio prodotto ogni volta che gli utenti sono sopra gli elementi del master span.

Per essere più accurato qui è il codice 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>

.

Quindi per riassumere vorrei sapere se c'è un modo in CSS per cambiare il colore del carattere del nome del prodotto un elemento ogni volta che gli utenti mouse sull'elemento Master Wrapper_ProductBox o sull'immagine del prodotto un elemento. Grazie mille per il tuo aiuto :)

Answer 1

Due scelte

ciascuno leggermente diverso.

Questo si attiverà l'involucro su anche lo spazio bianco nella casella .wrapper_product ( Fiddle Esempio>):

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

.

Attiverà solo in bilico sui due tag a all'interno il .wrapper_productbox ( Fiddle Esempio>):

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

.

Answer 2

Ecco la demo usata un po 'di jQuery.Se preferisci Pure CSS devi riporre il tuo codice HTML un po 'e sicuramente per avvolgere la sezione con un div non estensione perché lo span avrà un'altezza molto breve e non risponderà anche al tuo mouse.

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

.