悬停 CSS 的问题答案

【问题标题】：Problems with hover CSS悬停 CSS 的问题
【发布时间】：2012-05-18 23:19:04
【问题描述】：

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

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

【问题讨论】：

标签： css hover hide element show

【解决方案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;
}

对我来说，这看起来更干净一些，而且您可以在imgs 之间添加元素。

【讨论】：

非常感谢，整理好了。搞砸了好几个小时。

【解决方案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;
}

【讨论】：