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