图像在悬停时跳起来

Images jump up on hover

本文关键字：跳起来 悬停 图像      更新时间：2023-09-26

如果你看看小提琴你就知道我在说什么了。我试图创造这样一种效果，当用户将鼠标悬停在其中一张图像上时，他会从图像上滑下移除条。
问题是，当我把鼠标悬停在一个图像上时，其他图像会因为一些奇怪的原因跳下来。
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"时，您不能，因为它会很快消失。谢谢!

您有您的.show项display:inline-block;。默认情况下，vertical-align初始设置为baseline。参见MDN参考

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

固定演示

将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;
}

和position: relative在父div类

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

你可以用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/

我来晚了一点，但是这里有一个可以解决您的jQuery问题的Fiddle。玩设置，以获得恰到好处。

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-bardiv错误打开的边缘情况。

如果您将float:left添加到.show类中，则可以纠正此问题。

相关文章：