Question

我有三个社交图标，它们在悬停时会增长（css元素：悬停） - 我希望它们在用户停止悬停时缓慢缩小到初始大小 - 我怎么能用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图标缩小

2 个答案: