javascript - 图像在悬停时跳起来

Question

如果你看一下the fiddle你会知道我在说什么。我正在尝试创建这样一种效果，即当用户将鼠标悬停在其中一张图像上时，他会从图像上滑下删除栏。
问题是，当我将鼠标悬停在一张图片上时，其他图片由于某种奇怪的原因会跳下来。
HTML:

<div class="show">
    <a href="#">
        <img alt="Pic1" class="thumbnail" />
    </a>
    <div class="remove-bar">
        <a href="#">r </a>
    </div>
</div>
<div class="show">
    <a href="#">
        <img alt="Pic2" class="thumbnail" />
    </a>
    <div class="remove-bar">
        <a href="#"> r</a>
    </div>
</div>
<div class="show">
    <a href="#">
        <img alt="Pic3" class="thumbnail" />
    </a>
    <div class="remove-bar">
        <a href="#">r</a>
    </div>
</div>

CSS:

.show {
  display: inline-block;
}
.thumbnail {
  width: 12.5em;
  height: 18.750em;
  margin: 1em;
  margin-bottom: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px lighten(#333, 30%);
}
.remove-bar {
  text-align: right;
  width: 11.9em ;
  margin-top: 0;
  margin-left: 1em;
  background-color: blue;
  padding: 5px;
    } .remove-bar a {
    color: white;
}

JS:

$('.remove-bar').hide();
$('.show a').hover(function() {
    $(this).next('div.remove-bar').slideDown(100);
}, function() {
    $(this).next('div.remove-bar').slideUp(100);
});

另外，请注意，当您将鼠标悬停在图片上并尝试点击“r”时，您无法点击，因为它很快就会消失。 非常感谢!

Answer 1

您有.show 项display:inline-block;。默认情况下，它们的 vertical-align 最初设置为 baseline。 <强> See MDN Reference

如果您将 .show 的样式设置为包含 vertical-align:top;，这将缓解此问题。

Fixed Demo