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

});

我的两个问题是：

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

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

提前感谢您的回复。

西蒙

Answer 1

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

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

在HTML对象上使用jQuery Hover和Link

1 个答案: