JQuery：如何更改鼠标悬停事件上的图形？

Question

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

这是一个示例：

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

请注意，当您将鼠标悬停在左侧的家庭列表上时，相应的地图图标会出现正确的改变。

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

---

更新：下面建议用 ID 链接这两个元素。如果是这样的话，你还如何完成这件事呢？

Answer 1

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

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

在图像上：

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

jQuery，使用悬停函数对相应的ID进行动画处理，与for中的相同：

$(".mapHover").hover(function() {
  $("#" + $(this).attr('for')).animate({"left": "-=50px"}, "slow");
}, function() {
  $("#" + $(this).attr('for')).animate({"right": "+=50px"}, "slow");
});

Answer 2

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

Answer 3

像这样的事情：

$(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”即可:)