使用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

Answer 2

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

并且您需要在jsfiddle https://jsfiddle.net/1mnLwgny/中设置jquery。

Answer 3

1. auto不是变量。使用反逗号

2.添加JQuery库

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