JQuery : 마우스를 올려 놓을 때 그래픽을 어떻게 바꿀까요?

Question

JQuery를 사용하면 HTML table/div의 행 위에 마우스를 올려 놓을 때마다지도 아이콘을 어떻게 변경합니까?

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

공지 사항 (가) 왼쪽 오른쪽 변화에 대응하는지도 아이콘을 홈 목록을 통해 마우스를 가져가 : 여기

은 예입니다.

질문 : JQuery를 사용하여이 기능을 어떻게 에뮬레이션합니까?

---

업데이트 : 그것은 그 ID를 아래에 제시 한 두 가지 요소를 연결. 그렇다면 어떻게 이것을 달성 할 수 있습니까?

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

jQuery, using the hover function는 해당 ID 애니메이션 : 아마 두 요소는 ID에 의해 연결되어

Answer 1

..

Answer 2

이미지에

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

같은 HTML에서 for="" 속성을 사용 , 같은 것에 대한 것 :

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

이 같은 16,

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"일을 :) 변경 만든다