div를 표시하기 위해 CSS 전용 썸네일 위에 마우스를 놓습니다.

Question

해당 축소판 div 위에 마우스를 올려 놓으면 요소 내에서 이미지를 표시하기 위해 CSS를 사용하는 간단한 방법을 시도하고 있습니다. 나는 틸트 (~)를 사용하여 썸네일 외부의 요소를 대상으로 비교적 쉽게 사용할 수있을 것이라고 생각했습니다. 마우스 오버 범위가 부모 컨테이너에 있기 때문에 쉽게 작동하지 않을 것입니다. 이것을 위해 자바 스크립트를 사용하십시오. 그러나 이것이 가능하지 않다면, 그러면 다른 사람들의 의견이 이것에 무엇인지 알 수있을 것입니다. 그리고 아마도 미래에 누군가를 도울 수 있습니다.

HTML

<div class="container"> 
    <!-- Main images --> 
    <div class="primary img1"> 
    <img src="myimage.jpg" /> 
    </div> 

    <div class="primary img2"> 
    <img src="myimage2.jpg" /> 
    </div> 

    <!-- Thumbnails --> 
    <div class="thumb img2"> 
    <img src="myimage2.jpg" /> 
    </div> 
</div> 

CSS

.primary.img1 { 
    display: block; 
} 

.primary.img2 { 
    display: none; 
} 

.primary.img2:hover, .primary.img1 { 
    display: none; 
} 

.primary.img2:hover, .primary.img2 { 
    display: block; 
} 

Answer 1

코드의 문제는 엄지 손가락 표시 할 이미지 후입니다 ... 어떻게 든 당신을 도움이되기를 바랍니다 . 사용중인 선택기를 들여다 보면 그 이유를 이해할 수 있습니다.

~ combinator는 두 개의 선택기를 구분하고 두 번째 요소가 첫 번째 요소 앞에오고 둘 모두가 공통 부모를 공유하는 경우에만 두 번째 요소를 찾습니다.

General sibling selectors

그래서 지금 볼 수 있듯이 우리는 .thumb 뿅를 넣어 작업을 얻을 수 있습니다. (그래서 CSS에 약간의 변화가 우리가 새로운 이미지를 표시 .thumb를 가져.)

.primary.img1 { 
 
    display: block; 
 
} 
 
.primary.img2 { 
 
    display: none; 
 
} 
 
.thumb.img2:hover ~ .primary.img1 { 
 
    display: none; 
 
} 
 
.thumb.img2:hover ~ .primary.img2 { 
 
    display: block; 
 
}

<div class="container"> 
 

 
    <!-- Thumbnails --> 
 
    <div class="thumb img2"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    </div> 
 

 
    <!-- Main images --> 
 
    <div class="primary img1"> 
 
    <img src="http://placehold.it/351x150" /> 
 
    </div> 
 
    <div class="primary img2"> 
 
    <img src="http://placehold.it/352x150" /> 
 
    </div> 
 
</div>

Answer 2

사실 당신이 용기를 가지고 있지만 .primary 당신의 IMG clases이 이미지에 있어야하기 때문에 당신이 여기에서 무엇을하고 있는지 확실히 잘못 대신. 둘째로, 디스플레이 위에 마우스를 올려 놓을 수는 없습니다. 아무 것도 표시하지 않으면 보이지 않는 페이지에서 요소를 제거합니다. 숨김; (하지만 보이지 않는 요소가 여전히 구조에있다.) 그래서 기본적으로 당신은 디스플레이를 준 .primary.img2:hover를 유혹하고있다 : 없음 및 만들기 .primary.img1 표시 : 없음. 당신이하려고하는 것을 실제로 얻지는 마세요.하지만 도움이되기를 희망하는 구조를 보여 드리겠습니다.

HTML :

<div class="container"> 
    <!-- Main images --> 
    <div class="primary"> 
    <img class="img1" src="myimage.jpg" /> 
    </div> 

    <div class="primary"> 
    <img class="img2" src="myimage2.jpg" /> 
    </div> 

    <!-- Thumbnails --> 
    <div class="thumb"> 
    <img class="thumb-img2" src="myimage2.jpg" /> 
    </div> 
</div> 

CSS :

.primary .img1 { 
    display: block; 
} 

.primary .img2 { 
    display: block; 
} 

.img2:hover .img1 { 
    display: none; 
} 

.img2:hover .img1 { 
    display: block; 
} 

이