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

这是到目前为止我的代码

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

HTML

---

请试试这个

$(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”}）

请试试这个

$(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”}）


您需要在JSFIDLE中设置jquery

您需要在JSFIDLE中设置jquery

1。
auto
不是变量。加上反逗号

2.添加JQuery库


1。
auto
不是变量。加上反逗号

2.添加JQuery库


别忘了在你的小提琴中加入JQuery

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

工作版本：
别忘了在你的小提琴中加入JQuery

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

工作版本：
这将对两幅图像都有效，并将分别放大它们

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

还有一件事，您的演示没有包含jQuery。
这将对两幅图像都有效，并将分别放大它们

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

还有一件事，您的演示没有包含jQuery。
你快到了。只是忘记了包含JQuery库

包括它

并将JQuery更改为以下内容：

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

你就快到了。只是忘记了包含JQuery库

包括它

并将JQuery更改为以下内容：

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

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