javascript - 使用jquery在鼠标悬停/悬停时放大图像

Question

DEMO 这是我到目前为止的代码

我希望使用 jquery 在鼠标悬停或悬停时分别放大每个图像。我认为我有代码的主干，但它还没有完全工作。我是 jQuery 的新手，所以尝试理解一些在线文章一直是一个挑战，这是我在花了一个小时解决这个问题后所能看到的最接近的结果。

HTML

<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" id="test" alt="" />
<br>
<img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" id="test1" alt="" />

jQuery

$('#test').hover(function() {
$(this).css({ width: "100%", height: "100%" });
 }, function () {
        $(this).css({ width: auto, height: auto });
});

Answer 1

请尝试一下

$(document).on({
    mouseenter: function () {
        $(this).css({ width: "100%", height: "100%" });
    },

    mouseleave: function () {
        $(this).css({ width: "auto", height: "auto" });
    }
}, '#test');

Fiddle Demo

您的答案缺失$(this).css({ width: "auto", height: "auto"});

$('#test').hover(function() {
$(this).css({ width: "100%", height: "100%" });
 }, function () {
        $(this).css({ width: "auto", height: "auto" });
});

Demo Your Answer