Question

当鼠标悬停在图像1上时，我正试图让图像2出现在图像下方。

<ul>
   <li>
    <img id="img1" src="imageone.png">
    <br>
    <img id="img2" src="imagetwo.png">  
  </li>
</ul>

非常感谢帮助！

到目前为止，我有这个似乎不起作用的CSS

#img2 {
    display: none;
    position: absolute;
}
#img1:hover + #img2,
#img2:hover {

 display:block;
}

Answer 1

The +选择紧随其后的兄弟姐妹。您的图片不是，因为它们是以<br>分隔的。

Use ~代替：

#img1:hover ~ #img2

Answer 2

你非常接近。

首先，删除<br>标记，因为它会破坏相邻的兄弟选择器。

只要您翻过第一张图片，悬停就会起作用。

如果您将display: block应用于img，则不需要<br>标记。

根据你的布局，代字号（~）选择器也可以工作，但这取决于你是否在布局中有其他图像（我正在考虑一个照片库）。

ul {
  list-style: none;
}
#img2 {
  display: none;
}
#img1:hover + #img2 {
  display: block;
}

<ul>
   <li>
    <img id="img1" src="http://placehold.it/150x50">
    <img id="img2" src="http://placehold.it/150x50">  
  </li>
</ul>

Answer 3

使用波浪线而不是+号，因为你的中间有一个br

＆＃13;

#img2 {
    display: none;
    position: absolute;
}
#img1:hover ~ #img2,
#img2:hover {

 display:block;
}

＆＃13;

<ul>
   <li>
    <img id="img1" src="imageone.png">
    <br>
    <img id="img2" src="imagetwo.png">  
  </li>
</ul>

＆＃13;

Answer 4

你可能会遇到这样的事情：

.parent{
  position: relative;
}
.holder{
  position: fixed;
  width: 100px;
  height:100px;
  background-color: #efefef;
}
.img{
  width: 100px;
  height:100px;
  background-color: #ffefef;
}
#img2{
  display: none;
}
.holder:hover #img2{
  display: block;
}

<ul>
   <li class="parent">
     <div class="holder">
       <img class="img" id="img1" src="imageone.png">
       <br>
       <img class="img" id="img2" src="imagetwo.png">  
    </div>
  </li>
</ul>

当鼠标悬停在图像上时，将图像定位在另一个图像下方

4 个答案: