使用jquery在mouseover / hover上放大图像

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库

Working Demo

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

Answer 4

不要忘记将JQuery包含在你的小提琴中。

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

工作版本： Fiddle

Answer 5

这将适用于两个图像，并将单独放大

$('img').on('mouseover', function() {
    $(this).css({ width: "100%", height: "100%" });
});

还有一件事，你DEMO没有包含jQuery。

Answer 6

你几乎就在那里。只是你忘了包含JQuery库。

加入<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将JQuery更改为以下内容：

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

<强> Working Fiddle