0

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

});

私の2つの質問は次のとおりです。

  1. オブジェクト画像の属性を変更することで実行できると思われる.svg画像を変更する際のホバー効果に対応するようにjQueryを調整するにはどうすればよいですか?

  2. オブジェクトとのリンクを結ぶにはどうすればよいですか?

もともと私は.svg画像を保持するためにimgタグを使用していましたが、調査とブラウザの安定性に基づいて、オブジェクトを使用する方が賢明な選択であると思われました. しかし、私は克服できないように見えるこれらの問題に直面していません。

ご回答ありがとうございます。

サイモン

4

1 に答える 1

0

オブジェクトに hover 、別名 mouseover/mouseout はありません...おそらくこれはうまくいくかもしれません：

$(".socialMediaContainer").hover(function(){
    $("#dribble").attr("data", "images/social/dribbble_over.svg");
}, function(){
    $("#dribble").attr("data", "images/social/dribbble.svg"); 
});
于 2013-08-30T16:44:22.800 に答える