Question

当我通过悬停悬停在某些图像上时，格式化底部会包含额外的间距。 http://jsfiddle.net/44jQa/72/。这是在前两张图片中发生的。此外，当内容出现在悬停时，有时旧内容仍然存在。当悬停快速且旧内容不淡出时会发生这种情况。我该如何解决这些问题？

这是我的js：

function showPart(id) {
    $('#content .part' + id).fadeIn('400').addClass('show');
}
$('li').on('mouseenter', function () {
    $(this).find('img').fadeTo(400, 1);
    $(this).find('img').addClass("LHover");
    var id = $(this).data('id');
    if ($('.show').length == 0) {
        showPart(id);
    } else {
        $('.show').removeClass('show').fadeOut('100', function () {
            showPart(id);
        });
    }
}).on('mouseleave', function () {
    $(this).find('img').fadeTo(400, '.5');
    $(this).find('img').removeClass("LHover");
});

Answer 1

这是由边界引起的。在悬停时添加边框会导致高度增加一点，并将第二行中的块向右移动。

Demo

.LHover {
    border: 1px solid #000;
}

Answer 2

使用大纲：

http://jsfiddle.net/44jQa/74/

.LHover {
    outline: 1px solid #000;
}

Answer 3

你的问题是

.LHover {
    border: 1px solid #000;
}

由于您在图像的每一侧都添加了1px边框，因此每个方向的边界增加1px，从而导致其他图像移位并导致问题。

如果删除边框，则不会发生这种情况。尝试实施投影，这不会导致任何移动。

Answer 4

问题1：跳跃
虽然所有其他答案都是有效的（边界显然是有罪的），但我认为我会提供另一种解决方案，即更容易和更好的跨浏览器（轮廓和阴影不是很好支持，边框是）。我认为删除边框不是一个有效的选项，因为它是设计的一部分。奇怪的是被接受作为答案（这是一个解释，而不是一个解决方案）。

我要做的是默认情况下在图像上添加边框，但将颜色设置为透明。然后，您可以在悬停时更改边框颜色。像这样：

.lrow > img {
     border: 1px solid transparent;
    ...        
}
.lrow > img.LHover {
    border-color: #000;
}

要查看操作中的代码：http://jsfiddle.net/Pevara/44jQa/80/

问题2：淡出
而不是使用javascript来实现这一点，我会寻求一个完整的CSS解决方案。我同意并非所有浏览器都支持这一点，但它会优雅地降级，并且可以说明并非所有用户都启用了js，然后它根本不会降级，而只是失败。当快速移动时，css解决方案不会造成任何问题......

我改变了什么：

将html重组为更加语义正确的IMO Put 列表中的描述以及人员的信息。通过这种方式，屏幕阅读器或爬虫将能够理解您的页面以及
重命名了一些课程。不是真正的nessacary，但它使你的CSS成为一个更容易阅读（特别是一年后），而我在它...
删除了不再需要的数据ID
添加了css过渡以获得.photo淡入淡出效果
添加了css过渡以获取.description淡入淡出效果

HTML现在看起来像这样：

<div id="tabs">
    <ul class='clearfix'>
        <li class="person">
            <img class='photo' src="http://unclesmiley.files.wordpress.com/2010/01/smiley1.jpg" alt="Smiley face" height="42" width="42" />
            <p class="name">A</p>
            <p class='title'>Co-Director</p>
            <p class='description'>1 Lorem ipsum</p>
        </li>
        ...
    </ul>
</div>

和css：

#tabs ul {
    position: relative; /* to act as reference for the .description */
}
.description {
    opacity: 0; /* we use opacity to hide, because we want to be able to fade */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transition: opacity .4s; /* we want to fade opacity on hover */
}
.person {
    float: left;
    width: 135px;
}
.photo {
    opacity: .5;
    border: 1px solid transparent;
    transition: opacity .4s, border-color .6s; /* we want to fade opacity and bordr */
}
.person:hover .photo {
    border-color: #000;
    opacity: 1;
}
.person:hover .description {
    opacity: 1;
}

（对于clearfix类，我建议你查看谷歌，如果你不明白，那里有很多信息）

可以在这里找到一个工作示例： http://jsfiddle.net/Pevara/44jQa/81/

<强>更新
要保留状态，您需要一些javascript。通过向悬停的人添加一个类，并在另一个人收到悬停时删除它，我会很简单。

您只需要为：悬停样式添加一些额外的选择器。在您看到.person:hover [something]的任何地方，您都会添加一个额外的选择器，如逗号.person.active [something]，以逗号分隔。

javascript会变得非常简单，看起来像这样：

$('#tabs .person').hover(function() {
    // remove the previous active
    $('#tabs .person.active').removeClass('active');
    // add the active class to the current
    $(this).addClass('active');
});

这就是它的全部内容。

我更新了我的小提琴： http://jsfiddle.net/Pevara/44jQa/115/

如何在jquery悬停上停止额外的间距？

4 个答案: