懸停CSS的問題

Question

我想展示一個img，當我將鼠標懸停在另一個上面但沒有任何事情發生。在我能做些什麼來改變代碼

**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

正如@minitech表示任何意見，你需要正確的控制元件選擇與: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. 你錯過了一個combinator; .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; 
}