javascript - 鼠标悬停时交换图像

Question

我在页面顶部有一张链接图片，下面有 5 张链接图片。当鼠标悬停在下面的图片上时，顶部图片应该更改为鼠标悬停的图像和鼠标悬停的链接，它的大小也应该是原来的两倍，但我什至无法更改图像/链接。

这是我的 jQuery 代码:

$(document).ready(function() {
$("google").mouseenter(function() {
        $("big").attr({
        "href": "http://i.imgur.com/oO1RrsF.png?1",
        "src": "http://www.google.com".
    });
});
$("apple").mouseenter(function() {
        $("big").attr({ 
        "href" : "http://www.apple.com",
        "src" : "http://i.imgur.com/eHm7Nbg.png?1"
    });
});

$("facebook").mouseenter(function() {
        $("big").attr({
        "href" : "http://www.facebook.com",
        "src" : "http://i.imgur.com/ovkudjR.png?2"
    });
});

$("hooli").mouseenter(function() {
        $("big").attr({
        "href" : "http://www.hooli.xyz",
        "src" : "http://i.imgur.com/yfEYkoZ.png?2"
    });
});

$("piedpiper").mouseenter(function() {
        $("big").attr({
        "href" : "http://www.piedpiper.com",
        "src" : "http://i.imgur.com/Q3IhTeK.jpg?1"
    });
});
});

big是顶部图像的 ID。我将 id 标签放在 <a href> 中包裹在 img 标签周围。我已经玩了一段时间了，但没有任何效果。任何帮助将不胜感激!

Answer 1

您的选择器是错误的。您想要以下任何一项。

$("#google"); //ID google
$(".google"); //Class google

对于所有其他选择器也是如此。