호버 문제 CSS

Question

다른 호버로 마우스를 가져 가면 아무 것도 나타나지 않는 img를 보여주고 싶습니다. 내가 @minitech 말했듯이 코드를

**HTML** 
<div id="container-collection"> 

    <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg"> 

    <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg"> 

</div> 

**CSS** 

img.closeup1{ 
    display: none; 
} 

img.closeup1:hover clothes1 { 
    display: block; 
} 

Answer 1

을 변경하려면 무엇을 할 수 있는지에 대한 조언, 당신은 제대로 :hover 소유자와 제어 요소 선택기를 결합해야합니다.

나는 이런 식으로 뭔가 가고 싶어

:

HTML

<div id="container-collection"> 
    <div class="clothes1-wrap"> 
     <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg"> 
     <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg"> 
    </div> 
</div> 

CSS 나를 위해

.closeup1 { 
    display: none; 
} 

.clothes1-wrap:hover .closeup1 { 
    display: block; 
} 

이 조금 청소기를 보이는, 플러스 당신은 할 수 img 사이에 요소를 추가하십시오.

Answer 2

1. 클래스를 선택하려면 .이 누락되었습니다. .clothes1이어야합니다.
2. 연결자가 누락되었습니다. .clothes1은 (는) .closeup1의 자손이 아닙니다. 그러나 불행히도 "이전 형제 자매"를위한 조합자가 아직 존재하지 않습니다. CSS4에서는있을 것이지만 지금은 아닙니다. 순서를 셔플 것은 (당신이 어떤 멋진 CSS와 위치 변화를 보정 할 수 있습니다) 괜찮 경우

, 당신은이 작업을 수행 할 수 있습니다

<div id="container-collection"> 

    <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg"> 

    <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg"> 

</div> 

img.clothes1 { 
    display: none; 
} 

img.closeup1:hover + .clothes1 { 
    display: block; 
}