css - 悬停 CSS 的问题

Question

当我将鼠标悬停在另一个图像上但没有任何反应时，我想显示一个图像。关于我可以做些什么来更改代码的任何建议

**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 之间添加元素。