0

当我通过悬停悬停在某些图像上时，格式包括底部的额外间距。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");
});
4

4 回答 4

2

使用大纲：

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

.LHover {
    outline: 1px solid #000;
}
于 2013-06-12T18:16:59.033 回答
2

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

演示

.LHover {
    border: 1px solid #000;
}
于 2013-06-12T18:15:16.637 回答
1

你的问题是

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

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

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

于 2013-06-12T18:16:50.687 回答
1

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

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

.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 将描述与人员信息一起放在列表中。这样，屏幕阅读器或爬虫也可以理解您的页面
  • 重命名了一些类。不是真的 nessacary，但它让你的 css 更容易阅读（尤其是一年之后），而当我在它的时候......
  • 删除了 data-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。我会通过向悬停的人添加一个类来简化它，并在另一个人收到悬停时将其删除。

您只需要在 :hover 样式中添加一些额外的选择器。在你看到的任何地方，.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/

于 2013-06-12T19:27:03.850 回答