어떻게 팝업 이미지에 별도의 div 에 마우스 오버의 div 만을 사용하여 CSS?

문제

나는 작은 갤러리의 썸네일로 표시됩니다.할 때 나는 내 마우스 포인터를 축소판 이미지를 가지고 싶 전체 크기의 이미지 팝업 사업부에서 화면의 오른쪽 상단.본 적이 완료만을 사용하여 CSS 고 가고 싶어하는 경로가 아닌 자바 스크립트를 사용하면 가능합니다.

해결책

순수 CSS Popups2,같은 사이트에서 제공하는 우리 Complexspiral.이 예는 실제 사용 탐색으로 링크된 통해 요소입니다.원하지 않는 경우에는,그것이 원인이 될 수 있습니다 일부 끈적임에 관한 versions of IE.

기본적인 기술이 붙어 각 이미지 내의 링크를 태그와 실제 href(그렇지 않으면 일부는 IE 버전에 방치:hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

위치는 영리를 사용하여 절대 위치.숨기기 처음에 이미지

a img.popup { display: none }

다음 링크에서 롤오버,설정이 나타납니다.

a:hover img.popup { display: block }

는 기본적인 기술이 있지만,항상 중요한 위치한 이미지는 태그 안에 거하시면 링크를 태그입니다.대한 링크를 참조하십시오.세부 정보그가 사용하는 무언가를 조금 더 까다로운보다는 표시:아무도 이미지를 숨기.

다른 팁

CSS 놀이터 사용 순수 CSS 이러한 유형의 것,하나의 데모를 확실히하는 데 도움 당신은 그것의 모든 CSS 단 소스 보기는 배우-당신은 아마 사용하려면:hover 의사만 제한 사항이 있습니다 그것은 당신의 브라우저에 따라 대상으로 합니다.

에릭 메이어 순수 CSS 팝업 2 데모는 소리와 비슷한 충분히 당신이 무엇을 원합니다.

여기에 몇 가지 예:

이 마지막 중 하나에 따라 작동을 클릭합니다.그냥 완전에서 동작을 적용할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow