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

Answer 2

您错过了.来选择课程。它应该是.clothes1。
你错过了一个组合器; .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;
}

悬停CSS的问题

2 个答案: