Javascript 在HTML对象上使用jQuery悬停和链接

我有一个保存.svg图像的对象。我希望使用jQuery将悬停时的默认灰色图像（dribble.svg）更改为全彩图像（dribble_over.svg）

我已经实现了这段代码，但它似乎不起作用

HTML:

我的两个问题是：

如何调整jQuery以适应改变.svg图像时的悬停效果？我认为可以通过改变对象图像的属性来实现

如何将链接与对象绑定

起初，我使用img标记来保存.svg图像，但经过研究和浏览器稳定性，使用object似乎是更明智的选择。然而，我没有面对这些我似乎无法克服的问题

提前感谢您的回复

---

西蒙

物体上没有悬停，也就是鼠标悬停。。。 也许这会奏效：

$(".socialMediaContainer").hover(function(){
    $("#dribble").attr("data", "images/social/dribbble_over.svg");
}, function(){
    $("#dribble").attr("data", "images/social/dribbble.svg"); 
});

---

$（“此”）

！=

$（这个）

..images/social/dri

bbb

le.svg是故意的还是打字错误？你不能把

放在

周围并使其成为链接，你必须使用

或在

上放一个透明的

，然后链接

。如果图像除了灰度以外都是相同的，我会在SVG中实现这一点，方法是使用一个带有feColorMatrix过滤器的SVG文件将其灰显，删除悬停时的过滤器，所有这些都在SVG文件本身中，不需要javascript。Floris我读了你的评论，认为我犯了一个错误，尽管我似乎已经将我的图像命名为“dribbble”！我会等到找到解决方案后再改名字，不过谢谢你提醒我@reyaner-谢谢你的代码，尽管我不知道如何实现。你能帮忙吗？罗伯特朗森-谢谢你的输入，我会看看的！不幸的是，这些代码在两种浏览器上都不起作用。这是令人沮丧的，因为它似乎是一个简单的代码实现，虽然它只是不想知道！哎呀！！

$(document).ready(function() {
    $("#dribble").hover(function() {
        $("this").attr("data", "images/social/dribbble_over.svg");
    });

});

$(".socialMediaContainer").hover(function(){
    $("#dribble").attr("data", "images/social/dribbble_over.svg");
}, function(){
    $("#dribble").attr("data", "images/social/dribbble.svg"); 
});