使用jQuery放大鼠標懸停時的圖像

Question

演示這是我到目前為止的代碼

我想在每個鼠標懸停或使用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');

小提琴演示

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

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

演示答案

Answer 2

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

並且您需要在jsfiddle中設置jquery https://jsfiddle.net/1mnLwgny/

Answer 3

1. auto不是變量。 放在逗號中間

2.添加JQuery庫

工作演示

$('#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"});
});

工作版本： 小提琴

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" });
});

工作小提琴