Javascript 图像在悬停时跳跃

如果你看一眼，你就会知道我在说什么。我试图创建这样一种效果，当用户将鼠标悬停在其中一幅图像上时，他会从图像上滑下移除条<问题是，当我将鼠标悬停在一个图像上时，其他图像会因为某种奇怪的原因跳转下来
HTML:

JS:

---

另外，请注意，当您将鼠标悬停在图像上并尝试单击“r”时，您不能这样做，因为它很快就会消失非常感谢

在

移除条中添加
位置：绝对

.remove-bar {
  text-align: right;
  width: 11.9em ;
  margin-top: 0;
  margin-left: 1em;
  background-color: blue;
  padding: 5px;
  position: absolute;
}

和
位置：父div类中的相对

.show {
  display: inline-block;
    position: relative;
}

在
移除栏中添加
位置：绝对

.remove-bar {
  text-align: right;
  width: 11.9em ;
  margin-top: 0;
  margin-left: 1em;
  background-color: blue;
  padding: 5px;
  position: absolute;
}

和
位置：父div类中的相对

.show {
  display: inline-block;
    position: relative;
}

如果在
.show
类中添加
浮点：左
，则问题可以得到纠正。
如果在
类中添加
浮点：左
。show
类，则问题可以得到纠正。
您有
项
显示：内联块。默认情况下，它们的
垂直对齐
最初设置为
基线

如果将
.show
的样式设置为包含
垂直对齐：顶部这将缓解问题

您拥有您的
。显示
项目
显示：内联块。默认情况下，它们的
垂直对齐
最初设置为
基线

如果将
.show
的样式设置为包含
垂直对齐：顶部这将缓解问题

您可以使用CSS3而不是JavaScript！另外，您应该使用
垂直对齐：top用于顶级元素

.show {
    display: inline-block;
    vertical-align: top;
}
.show a + div {
    height: 0px;
    padding: 0px 5px;
    transition: all 0.1s linear;
}
.show a:hover + div {
    height: auto;
    padding: 5px;
}

没有JS
 您可以使用CSS3而不是JavaScript！另外，您应该使用
垂直对齐：top用于顶级元素

.show {
    display: inline-block;
    vertical-align: top;
}
.show a + div {
    height: 0px;
    padding: 0px 5px;
    transition: all 0.1s linear;
}
.show a:hover + div {
    height: auto;
    padding: 5px;
}

没有JS
 我参加聚会有点晚了，但这里有一把小提琴解决了jQuery的问题。播放设置，使其恰到好处


我试图覆盖所有可能导致
remove bar
div错误打开的边缘情况
 我参加聚会有点晚了，但这里有一把小提琴解决了jQuery的问题。播放设置，使其恰到好处


我试图覆盖所有可能导致
remove bar
div错误打开的边缘情况
 原因是+1。另外，Op的第二个问题可以通过将悬停绑定到包装器
div
而不是
a
上来解决。像这样：谢谢@abhitalks我没有看到问题的第二部分谢谢你们！这正是我所需要的。另外，Op的第二个问题可以通过将悬停绑定到包装器
div
而不是
a
上来解决。像这样：谢谢@abhitalks我没有看到问题的第二部分谢谢你们！这正是我所需要的。它应该是这样的：解决Op的第二部分的问题。它应该是这样的：解决Op的第二部分的问题。我的道歉，一半，我没有意识到我已经要求了一次投票。不知道我在想什么。请接受我诚挚的歉意。我的歉意一半，我不知道我要求投票表决。不知道我在想什么。请接受我真诚的道歉。
$('.remove-bar').hide();
var bar = null;
$('.show a').hover(function() {
    bar = $(this).next('div');
    bar.slideDown(100);
}, function() {
    setTimeout( function(){      
        if(bar.is(":hover")){
        }else{
            bar.slideUp(100);
        }
    },400);//give slow folks 200ms to get to the bar element
});

$('.remove-bar').hover(function(){
    }, function(){
    $(this).slideUp(100);
    }
);

$(document).mousemove(function() {
    setTimeout( function() {
        $('.remove-bar').each(function() {
            var parent = $(this).parent();
            if($(this).is(':hover')) {
            }else{
                if(parent.is(':hover') === false)
                {
                   $(this).slideUp(100);
                }
            }
        });
    },400);
});