2012-04-26 4 views
1

기사 요소 그룹이 있는데, nth-child를 사용하는 경우 배경색이 파란색으로 설정되고 나머지는 빨간색으로 설정됩니다.호버 (CSS)의 모든 요소 인스턴스 속성 변경

여기를 참조하십시오 : http://jsfiddle.net/8KFwh/4/

난 당신이 그들 중 하나를 위로 마우스를 이동하면 흰색 모든 문서 요소의 배경 색상을 변경할 수 있도록 찾고 있어요. 또한 마우스를 가져다 대면 배경색이 녹색으로 바뀌고 모든 기사 요소는 흰색을 제외하고는 흰색으로 바뀝니다.

JS에서 쉽게 할 수 있지만 CSS에서 할 수 있는지 알고 싶습니다.

감사합니다. 어떤 도움도 환영합니다. :)

답변

6

당신이 그런

<div class="hover-test"> 
    <article class="post">ABC</article> 
    <article class="post">ABC</article> 
    <article class="post">ABC</article> 
    <article class="post">ABC</article> 
</div> 

같은 사업부의 모든 기사를 포장하고있다 다음이 CSS를 사용하는 경우.

.post:hover { 
background-color:green; 
} 

.hover-test:hover .post { 
background-color: white; 
} 

.hover-test:hover .post:hover { 
background-color: green; 
} 

아마도 모든 브라우저에서 작동하지는 않습니다.

+0

아, 펀치에 맞았 어. – frontendzzzguy