取消悬停时 JQuery/Javascript/CSS 图标缩小 [关闭]答案

【问题标题】：JQuery/Javascript/CSS icon shrinking when de-hovered [closed]取消悬停时 JQuery/Javascript/CSS 图标缩小 [关闭]
【发布时间】：2016-02-14 15:53:11
【问题描述】：

我有三个社交图标，它们在悬停时会增长（css 元素：悬停） - 我希望它们在用户停止悬停时慢慢缩小到初始大小 - 我如何使用 Javascript、CSS 或 jQuery 来解决它？

【问题讨论】：

请填写你的代码，你到底在做什么，你想要什么结果

标签： javascript jquery css hover

【解决方案1】：

您可以单独使用 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

【讨论】：

谢谢，我总是将我的过渡放在 :hover 元素中，所以它不能双向工作。知道这绝对是一件好事。

【解决方案2】：

嗯，jQuery 有一个方便的函数集，称为 .mouseenter() 和 .mouseleave()，我相信你一定听说过 :)。

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

$(document).ready(function(){

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

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

    });

});

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

【讨论】：

非常感谢，这正是我正在寻找的功能。我以前没听说过，我有点初学者:)