CSS3 / Transição / alterar a cor da fonte no bisavô

Question

Estou brincando com a transição CSS3.Espero que minha pergunta não seja muito noob e realista :) Basicamente, sempre que os usuários passam o mouse sobre alguns elementos, eu altero via css a cor do texto.

Agora o problema que tenho é que:Eu tenho uma caixa div com o nome de um produto que está incluído em um elemento span master, que também contém outros dados.Gostaria de alterar a cor do meu produto sempre que os usuários ultrapassarem os elementos master span.

Para ser mais preciso aqui está o 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>

Então, para resumir, gostaria de saber se existe uma maneira em CSS de alterar a cor da fonte do elemento product-name sempre que os usuários passam o mouse sobre o elemento master wrapper_productbox ou o elemento product-image.

Muito obrigado pela sua ajuda :)

Answer 1

Duas escolhas

Cada um ligeiramente diferente.

Isso ativará o pairar sobre até mesmo o espaço em branco no .wrapper_product caixa (Exemplo de violino):

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

Isso só ativará o pairar sobre os dois a Tag dentro o .wrapper_productbox (Exemplo de violino):

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

Answer 2

Aqui está a DEMO Usei um pouco de Jquery.Se você preferir CSS puro, você terá que reestruturar um pouco seu código HTML e definitivamente envolver sua seção com um div e não span porque o span terá uma altura muito curta e não responderá nem mesmo ao seu foco.

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