0

当我将鼠标悬停在另一个上时，我想显示一个 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;
}
4

2 回答 2

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

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

于 2012-05-18T23:22:40.920 回答
1
  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;
}
于 2012-05-18T23:23:02.900 回答