JQuery: Как вы меняете графику при наведении мыши?

Question

Используя JQuery, как изменить значок карты при наведении указателя мыши на строку в таблице HTML / div?

Вот пример:

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

Обратите внимание, что при наведении указателя мыши на список домов слева соответствующий значок карты справа изменится.

Вопрос : как мне эмулировать эту функцию с помощью JQuery?

---

Обновление : Ниже было предложено, чтобы идентификатор связывал два элемента. Если это так, как бы вы все еще это сделали?

Answer 1

Используйте атрибут for="" в html, например

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

На изображении:

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

jQuery, используя функцию наведения для анимации соответствующего идентификатора, того же самого в for:

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

Answer 2

Примерно так:

$(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":)

Answer 3

Вероятно, оба элемента связаны между собой идентификатором ..