jquery - 当鼠标悬停在元素右侧的元素上时，在图像下方显示一个框

Question

我的目标:我想创建一个水平图像列表。当鼠标悬停在图片上时，悬停图像下方会出现描述(在宽度相同但高度取决于文本的框中)。每个描述都取决于图像

问题:附带的解决方案显示了描述，但它也移动了右侧的图像。

这是代码。

html

<ul id="list-icons">
    <li>
       <img src="" class="icon" />
       <p class="popup">Test</p>
    </li>
      <li>
       <img src="" class="icon" />
       <p class="popup">Test2</p>

    </li>
</ul>

j查询

<script>
$(".icon").hover(
  function () {
    $(this).next(".popup").slideToggle();
  });
</script>

CSS

#list-icons li
{
  display:inline-block;
}

.icon {  
border: 1px solid #aaa;  
width:100px;
height:100px;
}  
.popup{
display:none;
width:100px;
}

我的错误在哪里？

Answer 1

包含如下CSS，

1. 将 width: 100px 添加到 li 而不是将其添加到 p 标签。而 img 标签上的 width: 100px 将不会被应用。

2. 添加了 vertical-align: top 以在下面显示描述时使图像保持在顶部。

CSS:

#list-icons li
{
  display:inline-block;
  vertical-align: top;  
  width:100px;
}
.icon {  
  border: 1px solid #aaa; 
  height:100px;
}  
.popup{
  display:none;
  width:100px;
}

DEMO