div에 영향 : 다른 div로 이동

메인 이미지 위로 마우스를 가져 가면 미리보기 이미지가 투명 해지는 갤러리를 만들고 있습니다. 순수한 CSS로이 작업을 수행하고 싶습니다. 그러나 가능한지 확실하지 않습니다.div에 영향 : 다른 div로 이동

CSS :

/* should affect thumbs but not main */ 
/* obviously this code wouldn't work */ 
#main:hover, #thumbs { 
    opacity: .5; 
}

HTML :

<div id="main"> 
    Hover over me to change #thumbs 
</div> 
<div id="thumbs"> 
    I change when you hover over #main 
</div>

순수 CSS를 사용하여이 가능합니까? 그것은, 그것은 내가 onMouseover와 이벤트를 사용하는 것이 좋습니다 것입니다 : IE에서

작동하지 않습니다 경우에도

출처

2011-08-15 JacobTheDev

물론, 단지 인접 형제 선택 사용 : 여기

#div1:hover + #div2 { 
    ... 
}

예 : http://jsfiddle.net/6BfR6/94/

출처

2011-08-15 19:31:29 Nightfirecat

+1 놀라운 ... 존재하지도 않았다! http://meyerweb.com/eric/articles/webrev/200007a.html – samccone

와우! 감사! 그것은 절대적으로 완벽합니다! 나보다 위의 남자처럼, 나는 존재한다는 것을 전혀 몰랐다. 완전한. – JacobTheDev

+1 Javascript 없이도이 작업을 수행 할 수 있는지 전혀 몰랐습니다. –

-1

그러나 그것은 좋은 질문은 누군가가 그것을 크로스 브라우저를하는 솔루션이 있는지 궁금 해요 CSS를 통해

출처

2011-08-15 19:31:03 mkk

IE에서 작동 할 필요가 없습니다. 이미 대체 작성 방법을 알고 있지만 그 문제는 해결할 수 없습니다. 그것은 더 많은 개인 사이트입니다. – JacobTheDev

@rev : Nightfirecat에서 제공하는 솔루션을 참조하십시오. 그것은 놀랍습니다 그리고 IE 7 & 8에서 작동합니다 - 나는 테스트했습니다 – mkk

당신은 CSS만으로 이것을 할 수 있습니다. 내 [순수 CSS 신호 막대 등급 위젯 응답] (http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900)을 참조하십시오. (위에서 보인) DOM *에 나타나기도 전에 나타 났던 요소의 스타일을 변경할 수 있음을 보여줍니다. –

선택자의 자녀 만 영향을받을 수 있습니다. 그렇지 않으면 javascript를 사용해야합니다. 예를 들어

div:hover #childDiv { 
    background: green; 
}

출처

2011-08-15 19:31:14 Trevor

-1

나는 당신이 몇 가지 자바 스크립트를 필요로하기 위하여려고하고있다 생각합니다.

출처

2011-08-15 19:31:17

CSS만으로이 작업을 수행 할 수 있습니다. 내 [순수 CSS 신호 막대 등급 위젯 응답] (http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900)을 참조하십시오. (위에서 보인) DOM *에 나타나기도 전에 나타 났던 요소의 스타일을 변경할 수 있음을 보여줍니다. –

심각하게? 4 년 후 downvoting? –

그 당시와 마찬가지로 이제는 잘못되었습니다. 나는 어제 대답을 우연히 발견했다. 나는 그들이 게시 될 때 답변을 읽을 수있는 운영자가 아닙니다. 웹 검색에서 여기에 도착한 무작위 사용자. –

-1

아니요. 자바 스크립트를 사용해야합니다.

출처

2011-08-15 19:31:18

#의 div1 : 호버 + # DIV2 { ... }

을

IE 7, 8, 9 및 10에서는 정상적으로 작동합니다. JS 또는 onovermouse 및 에만 해당 아동의 선택자가 영향을받을 수 있습니다.

"Nightfirecat"예제 링크를 사용해보세요.

출처

2013-03-10 12:44:38 dsgsd

div에 영향 : 다른 div로 이동

답변

관련 문제