使用 JQuery 将鼠标悬停在图像周围时创建边框答案

【问题标题】：Create a border around an image when hovered over with JQuery使用 JQuery 将鼠标悬停在图像周围时创建边框
【发布时间】：2015-04-24 21:21:30
【问题描述】：

我有这段代码可以尝试调整我的图像大小，并在它周围添加一个 10 像素的纯红色边框。我想出了如何调整图像的大小，但不知道如何为它设置动画，这样当我用鼠标悬停在它上面时，会出现一个红色边框。任何帮助深表感谢。我觉得我很接近了，但还没有到那里。谢谢大家！

<!DOCTYPE html>
<html>
<head>
<title>Image Resize</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(function() {
    var ht = $("img").height(),
        wd = $("img").width(),
        mult = 1.5; 

    $("img").on('mouseenter', function () {
        $(this).animate({
            height: ht * mult,
            width: wd * mult,
        }, 500);
    });

    $("img").on('mouseenter', function () {
        $(this).animate({"border" : "10px solid red"} , "slow");
    });

    $("img").on('mouseleave', function () {
        $(this).animate({
            height: ht,
            width: wd
        }, 500);
    })

    $("img").on('mouseleave', function (){
        $(this).animate({"border-radius" : "0px"}, "slow");
    });
});
</script>


</head>


<body>

<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200"  alt="" />

</body>



</html>

【问题讨论】：

标签： jquery hover jquery-animate border

【解决方案1】：

您不能为颜色设置动画，但可以为边框宽度设置动画：

$('img').mouseenter(function () {
    $(this).css({border: '0 solid red'}).animate({
        borderWidth: 10
    }, 500);
    }).mouseleave(function () {
     $(this).animate({
        borderWidth: 0
    }, 500);
});

【讨论】：

它就像一个魅力。你是救生员...谢谢@erkaner！
@hartjacko 如果您能将其标记为正确答案，那就太好了：)

【解决方案2】：

你试过悬停吗？有over and out功能

$(".ImageBorder").hover(
    function () {
        $(this).css("border", "10px solid red");
    },
    function () {
        $(this).css("border", "0px none");
    }
);

【讨论】：