1

JQuery を使用して、HTML テーブル/div の行にマウスを合わせるたびに地図アイコンを変更するにはどうすればよいですか?

次に例を示します。

http://www.sfsunriseidx.com/homes/94131/?uuid=9ed7269b-5327-4c88-ba15-f700ed343d69&source=REDIR

左側のホーム リストにマウス ポインターを合わせると、右側の対応するマップ アイコンが変化します。

質問: JQuery を使用してこの機能をエミュレートするにはどうすればよいですか?

更新: ID が 2 つの要素をリンクすることが以下に提案されました。その場合、どうすればこれを達成できますか?

4

3 に答える 3

2

for=""次のように、html で属性を使用します。

<a href="page.html" for="mapIcon4" class="mapHover">Hover Link</a>

画像上：

<img id="mapIcon4" src="myImg.png" />

jQuery、ホバー機能を使用して、対応する ID をアニメーション化します。

$(".mapHover").hover(function() {
  $("#" + $(this).attr('for')).animate({"left": "-=50px"}, "slow");
}, function() {
  $("#" + $(this).attr('for')).animate({"right": "+=50px"}, "slow");
});
于 2010-01-27T21:40:44.790 に答える
0

おそらく、両方の要素が ID でリンクされています。

于 2010-01-27T21:29:54.330 に答える
0

このようなもの：

$(document).ready(function() {
    var googleMap = $("#googleMaps");

    $('a', '#mapLinks').hover(function() {
        var index = $(this).index(this);
        $('img:eq(' + index + ')', googleMap).animate({
            width: '+=10%'
        });
    }, function() {
        var index = $(this).index(this);
        $('img:eq(' + index + ')', googleMap).animate({
            width: '-=10%'
        });
    });
});

「#googleMaps」と「#mapLinks」を必ず変更してください:)

于 2010-01-27T23:44:06.937 に答える