Grand-Grand-Grand-Grand-Grand-Grand-Grand-Grand-ParentのCSS3 /変更/変更

Question

私はCSS3の移行を伴うつや消しです。私の質問があまりにも多くのnoobと現実的ではないことを願っています。

今すぐ問題はそれです。私はSPANマスター要素に含まれる製品の名前を持つDIVボックスを持っています。 ユーザーがマスタースパン要素を超えているときはいつでも私の製品の色を変更したいと思います。

ここでより正確になるためには、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>

.

SOM上に起訴すると、ユーザーがマスターwrapper_productbox要素または製品画像A要素の上にマウスをマウスしたときに、製品名A要素のフォントの色を変更する方法があるかどうかを知りたいと思います。

あなたの助けをありがとうございました:)

Answer 1

2つの選択

それぞれ異なる

これは、.wrapper_productボックスの空白でさえを介してアクティブになります（フィドル例）：

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

.

これは、2つのaタグを介してホバリングを有効にします。）：

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

.

Answer 2

これはDemo のjQueryを使用しました。純粋なCSSを好む場合は、スパンが非常に短い高さを持ち、偶数の高さを持ち、ハーバーには偶然のHTMLコードを一番構築する必要があります。

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

.