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

Question

我有一个包含 .svg 图像的对象。我想做的是使用jQuery在悬停时将默认的灰色图像（dribble.svg）更改为全彩图像（dribble_over.svg）。

我已经实现了这个似乎不起作用的代码。

HTML：

<div class="socialMediaContainer">
     <object type="image/svg+xml" data="images/social/dribbble.svg" width="74px" height="60px" id="dribble"></object>
     <a href="" target="_blank">Dribble</a>
</div>

jQuery：

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

});

我的两个问题是：

1. 如何调整我的 jQuery 以适应更改 .svg 图像时的悬停效果，我认为可以通过更改对象图像的属性来完成？

2. 我如何绑定与对象的链接？

最初我使用 img 标签来保存 .svg 图像，但是根据研究和浏览器稳定性，似乎使用对象是更明智的选择。但是，我没有面临这些我似乎无法克服的问题。

提前感谢您的回复。

西蒙

Answer 1

对象上没有悬停，也就是鼠标悬停/鼠标悬停...也许这可能有效：

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