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

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

jquery css

如何停止jquery悬停上的额外间距？,jquery,css,Jquery,Css,当我通过鼠标悬停在某些图像上时，格式在底部包含额外的间距。这发生在前两张图片中。此外，当内容出现在悬停位置时，有时旧内容会保留下来。当悬停速度很快且旧内容不会消失时，就会发生这种情况。如何解决这些问题这是我的js： function showPart(id) { $('#content .part' + id).fadeIn('400').addClass('show'); } $('li').on('mouseenter', function () { $(this).fin

当我通过鼠标悬停在某些图像上时，格式在底部包含额外的间距。这发生在前两张图片中。此外，当内容出现在悬停位置时，有时旧内容会保留下来。当悬停速度很快且旧内容不会消失时，就会发生这种情况。如何解决这些问题

这是我的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");
});

这是由边界造成的。在“悬停”上添加边框会使高度增加一点，并将第二行中的块向右移动

你的问题在于

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

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

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

您的问题在于

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

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

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

使用轮廓：

使用大纲：

问题1：跳转
尽管所有其他答案都是正确的（边界显然是有罪的），但我想我会提供另一种解决方案，那就是imo更简单、更好的跨浏览器解决方案（轮廓和阴影没有得到很好的支持，边界是）。我认为仅仅删除边框是无效的，因为它是设计的一部分。奇怪的是，这个答案被接受了（这是一种解释，而不是解决方案）
我要做的是在默认情况下在图像上添加边框，但将颜色设置为透明。然后，您可以在悬停时更改边框颜色。大概是这样的：

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

<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>

$('#tabs .person').hover(function() { // remove the previous active $('#tabs .person.active').removeClass('active'); // add the active class to the current $(this).addClass('active'); });
要查看正在运行的代码，请执行以下操作：
问题2：褪色
与其使用javascript来实现这一点，我会选择一个完整的css解决方案。我同意并不是所有的浏览器都支持这一点，但它会优雅地降级，有人可能会说，并不是所有的用户都启用了js，然后它就不会降级，只是失败了。而且css解决方案在快速移动时不会造成任何问题
我改变的是：

重新构造html，使其在语义上更加正确列表中的描述，以及此人的信息。这样，屏幕阅读器或爬虫程序将能够理解您的页

重命名了一些类。不是真的nessacary，但它使您的css成为读起来容易多了（特别是一年后），而且当我在它

已删除数据id，因为不再需要它

添加css转换以获得.photo淡入淡出效果

添加css转换以获得.description淡入淡出效果

HTML现在看起来像这样：

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

<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>

$('#tabs .person').hover(function() { // remove the previous active $('#tabs .person.active').removeClass('active'); // add the active class to the current $(this).addClass('active'); });
（对于clearfix类，我建议你检查一下谷歌，如果你不明白，那里有很多信息）
可在此处找到一个工作示例：
更新
要保留状态，需要一些javascript。我将通过向被悬停的人添加一个类来简化它，并在其他人收到悬停时将其删除
您只需在：hover样式中添加一些额外的选择器。无论你在哪里看到
.person:hover[something]
你都会添加一个额外的选择器，如so
.person.active[something]
，用逗号分隔
javascript将变得非常简单，如下所示：

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

<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>

$('#tabs .person').hover(function() { // remove the previous active $('#tabs .person.active').removeClass('active'); // add the active class to the current $(this).addClass('active'); });
这就是全部
我更新了我的小提琴：
问题1：跳转尽管所有其他答案都是正确的（边界显然是有罪的），但我想我会提供另一种解决方案，那就是imo更简单、更好的跨浏览器解决方案（轮廓和阴影没有得到很好的支持，边界是）。我认为仅仅删除边框是无效的，因为它是设计的一部分。奇怪的是，这个答案被接受了（这是一种解释，而不是解决方案）
我要做的是在默认情况下在图像上添加边框，但将颜色设置为透明。然后，您可以在悬停时更改边框颜色。大概是这样的：

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

<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>

$('#tabs .person').hover(function() { // remove the previous active $('#tabs .person.active').removeClass('active'); // add the active class to the current $(this).addClass('active'); });
要查看正在运行的代码，请执行以下操作：
问题2：褪色
与其使用javascript来实现这一点，我会选择一个完整的css解决方案。我同意并不是所有的浏览器都支持这一点，但它会优雅地降级，有人可能会说，并不是所有的用户都启用了js，然后它就不会降级，只是失败了。而且css解决方案在快速移动时不会造成任何问题
我改变的是：

重新构造html，使其在语义上更加正确列表中的描述，以及此人的信息。这样，屏幕阅读器或爬虫程序将能够理解您的页

重命名了一些类。不是真的nessacary，但它使您的css成为读起来容易多了（特别是一年后），而且当我在它

已删除数据id，因为不再需要它

添加css转换以获得.photo淡入淡出效果

添加css转换以获得.description淡入淡出效果

HTML现在看起来像这样：

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

<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>

$('#tabs .person').hover(function() { // remove the previous active $('#tabs .person.active').removeClass('active'); // add the active class to the current $(this).addClass('active'); });
（对于clearfix类，我建议你检查一下谷歌，如果你不明白，那里有很多信息）
可在此处找到一个工作示例：
更新
要保留状态，需要一些javascript。我将通过向被悬停的人添加一个类来简化它，并在其他人收到悬停时将其删除
您只需在：hover样式中添加一些额外的选择器。你所看到的任何地方