Grand-Grand-Grand Parent의 CSS3 / 전환 / 글꼴 색 변경
문제
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 요소를 마우스로 마우스로 변경할 때마다 제품 이름의 글꼴 색상을 변경하는 방법이 있는지 알고 싶습니다. 귀하의 도움을 주셔서 대단히 감사합니다.)
해결책
두 가지 선택
각각 약간 다릅니다.
.wrapper_product
상자에서 흰색 공간 에 대한 을 활성화합니다.) :
.wrapper_productbox:hover .product-name a {
color: red;
}
.
이것은 내부의 두 개의 a
태그 에만 활성화됩니다.) :
a:hover + .categoryProductBox a,
.categoryProductBox a:hover {
color: red;
}
. 다른 팁
Demo 는 약간의 jQuery를 사용했습니다.순수한 CSS를 선호하는 경우 HTML 코드를 조금 제작해야하며 SPAN이 매우 짧은 높이를 가지며 해당 하이버에 응답하지 않기 때문에 HTML 코드를 조금씩 랩핑하지 않아.
$('.wrapper_productbox').hover(
function() {
$('.product-name a').css('color','green');
},function() {
$('.product-name a').css('color','#000');
}
);
. 제휴하지 않습니다 StackOverflow