CSS3만으로 그 아이를 가져 가면 요소 스타일 변경

Question

특정 요소를 가리키면 배경 이미지가 변하는 사이트가 있습니다. 이미지는 대개 어둡지 만 때로는 밝습니다. 라이트 이미지는 클래스 .whiteImg이 적용됩니다.

나는 배경의 이미지를 잡아 끌고있는 요소의 형제로 설정함으로써 CSS로만 작업 할 수있게되었습니다. 예를 들면 :

HTML :

<ul> 
    <li> 
    <a>link 1</a> 
    <img src="http://foo.com/" /> 
    </li> 
    <li> 
    <a>link 2</a> 
    <img src="http://foo.com/" /> 
    </li> 
    <li> 
    <a>link 3</a> 
    <img src="http://foo.com/" class="whiteImg" /> 
    </li> 
</ul> 

CSS : 이제 모두가 잘 작동하는지

img{ 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    opacity: 0; 
    transition: opacity 1s; 
} 
li a:hover + img{ 
opacity: 1; 
} 

. 하지만 기본적으로 body{color: #fff;}이 있는데 .whiteImg이 표시되면 #000으로 변경해야합니다. 나는 이것을 jQuery (컬러 플러그인)로 풀려고했지만 애니메이션은 CSS 애니메이션 이후에 발생한다. 그래서 순수한 CSS 솔루션을 찾고 있습니다. body color은 .whiteImg과 동시에 검은 색으로 변합니다.

어쨌든 이것을 할 수 있습니까? 나는 실제로 작동하지 않습니다 분명히 this post의 말에 영감 있지만

li a:hover + img.whiteImg < body { 
    color: #000; 
} 

비슷한 뭔가를 찾고 있어요.

감사합니다.

Answer 1

이 내가 생각할 수있는 유일한 순수 CSS의 솔루션입니다 :

이

http://jsfiddle.net/7K83g/3/

li, li * { 
    position: relative; 
    z-index: 2; 
} 
.whiteImg ~ .fakebg { 
    display: block; 
    position: absolute; 
    z-index: 1; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background: black; 
} 

이, 100 % 솔루션 링크에 대한 권리 위치를 적용 direction: rtl를 사용합니다. 대신 jQuery로

:

$(document.body).toggleClass("dark"); 

CSS :

.dark { background: black; color: white; } 

이 트릭을 할 것입니다.
예 : http://jsfiddle.net/QKAh6/

Answer 2

the post your refer to과 같이 > 선택자는 실제로 구현되지 않습니다. 현실은 CSS에서 부모를 선택할 수 없다는 것입니다.

는 또한 대안의 jQuery 방법 상태 : 귀하의 경우

$('p:has(img)'); 

를이 될 것이다 : 당신은 이미지 변화를 유발하는 경우

$('body:has(img.whiteImg)').css('color', '#fff'); 

그냥이를 실행합니다.

---

또는 새 이미지가 흐려지기 시작할 때 클래스를 몸에 추가하거나 제거하기 만하면됩니다.

body { 
    color: #000; 
    transition: color 0.4s; 
} 

body.negative { color: #fff; }