JQuery/Javascript/CSS 取消悬停时图标缩小

Question

我有三个社交图标，它们在悬停时会变大 (css element:hover) - 我希望它们在用户停止悬停时慢慢缩小到初始大小 - 我怎么能用 Javascript、CSS 或 jQuery?

Answer 1

好吧，jQuery 有一个名为 .mouseenter() 和 .mouseleave() 的实用功能集，我相信您一定听说过 :)。

你显然知道如何让元素变大，所以为了让它们变小，我会反转你所做的并在 .mouseleave() 之后减小尺寸，我认为这样的事情会起作用：

$(document).ready(function(){

    $('your_element_here').on('mouseleave', function(){

        $(this).animate({height: '20px', width: '20px'}, 500);

    });

});

只有您将 '20px' 替换为您希望图标缩小到的任何高度和宽度。我希望这会有所帮助，我很乐意根据您的需要对此进行扩展，如果您需要其他任何内容，请发表评论。

Answer 2

您可以单独使用 CSS 通过 transition 属性实现此目的，不需要 Javascript。

.icon {
    font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
    transition: font-size 0.3s;
}
.icon:hover {
    font-size: 4em;
}

Working example

JQuery/Javascript/CSS 取消悬停时图标缩小

JQuery/Javascript/CSS icon shrinking when de-hovered

javascript

css

jquery

hover