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

Answer 2

在position: absolute类

中添加remove-bar

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

父div类中的position: relative

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

Demo

Answer 3

您可以使用CSS3代替JavaScript！此外，您应该使用vertical-align: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！ http://jsfiddle.net/samliew/Smwd6/

Answer 4

我参加聚会有点晚了，但这是解决你的jQuery问题的小提琴。使用设置进行游戏即可。

http://jsfiddle.net/dRyGL/25/

$('.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);
});

我试图覆盖所有可能导致remove-bar div被错误地打开的边缘情况。

Answer 5

如果您在float:left课程中添加了.show，则可以解决问题。

图像在悬停时跳起来

5 个答案: