Grand-Grand-Grand Parent의 CSS3 / 전환 / 글꼴 색 변경

Question

CSS3 전환으로 주변을 울려 눕히고 있습니다.나는 내 질문이 너무 많은 멍청하고 현실적이지 않을 것입니다 :) 기본적으로 사용자가 일부 요소를 마우스를 마우스를 마우스로 마우스를 마우스로 변경하면 CSS의 색상을 통해 변경되었습니다.

이제는 내가 가진 문제는 다음과 같습니다. 다른 데이터가 포함 된 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>

.

요약을 위해 CSS가 마스터 랩퍼 _ProductBox 요소 또는 제품 이미지 A 요소를 마우스로 마우스로 변경할 때마다 제품 이름의 글꼴 색상을 변경하는 방법이 있는지 알고 싶습니다. 귀하의 도움을 주셔서 대단히 감사합니다.)

Answer 1

두 가지 선택

각각 약간 다릅니다.

.wrapper_product 상자에서 흰색 공간 에 대한 을 활성화합니다.) :

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

.

이것은 내부의 두 개의 a 태그 에만 활성화됩니다.) :

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

.

Answer 2

Demo 는 약간의 jQuery를 사용했습니다.순수한 CSS를 선호하는 경우 HTML 코드를 조금 제작해야하며 SPAN이 매우 짧은 높이를 가지며 해당 하이버에 응답하지 않기 때문에 HTML 코드를 조금씩 랩핑하지 않아.

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

.