1

使用 JQuery，每当我将鼠标悬停在 HTML 表/div 中的一行上时，如何更改地图图标？

这是一个例子：

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

请注意，当您将鼠标悬停在左侧的主页上时，右侧的相应地图图标会发生变化。

问题：如何使用 JQuery 模拟此功能？

更新：下面建议使用 ID 链接这两个元素。如果是这样的话，你仍然会如何做到这一点？

4

3 回答 3

2

在html中使用for=""属性，比如

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

图片上：

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

jQuery，使用hover函数对对应的ID进行动画处理，for中的同一个：

$(".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

像这样的东西：

$(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 回答
0

可能这两个元素都通过 ID 链接..

于 2010-01-27T21:29:54.330 回答