이미지/링크/다른 div 위로 마우스를 가져 가면 DIV가 나타나는 방법은 무엇입니까?

Question

나는 전에 이것을했지만, 슬프게도 나는 잊었다. 나는 간단한 CSS로 그렇게했기 때문에 자바 스크립트 나 jquery를 사용해서는 안된다. 내가 원하는 것은 A가 표시되고 A가 가리키면 B가 표시되는 것입니다.

위의 작업을 수행 한 후 표시 할 수있는 방법을 제시 한 후에도 슬라이딩 사용 방법을 보여줄 수 있습니다. 숨겨진 div에 애니메이션? 그래서 A 위에 마우스를 가져 가면 B가 슬라이드됩니까?

Answer 1

다음은 IE 6에서 작동하지 않는 순수한 CSS입니다. 링크 및 상자 (#tooltip) 둘레에 컨테이너 #outer을 배치해야합니다. 물론 실제 응용 프로그램에서는 절대 위치 지정을 사용하여 상자의 위치를 ​​지정하려고 할 것입니다.

#tooltip { 
    display: none; 
} 

#outer:hover #tooltip { 
    display: block; 
} 

그리고 HTML (try it) : 애니메이션

<div id="outer"> 
    <img src="http://www.google.com/images/logos/ps_logo2.png"> 
    <div id="tooltip">Hello, world!</div> 
</div> 

, 당신은 CSS3 애니메이션에 대한 브라우저 지원은 오히려 가난 때문에 jQuery를 또는 다른 JS 라이브러리를 사용하는 것이 가장 좋은 선택이다.