JQuery：如何更改鼠標懸停事件上的圖形？

使用JQuery時，只要將鼠標懸停在HTML表格/ div的行上，我該如何更改地圖圖標？JQuery：如何更改鼠標懸停事件上的圖形？

下面是一個例子：

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

注意當您將鼠標懸停在左邊，在右邊的變化相應的地圖圖標家上市。

問題：我如何使用JQuery來模擬此功能？

更新：有人建議低於一個ID連接的兩個元件。如果是這樣的話，你會如何實現這一目標？

來源

2010-01-27 BillT

也許兩個元件通過ID聯..

來源

2010-01-27 21:29:54

所以如果一個ID沒有聯繫他們，那麼你會怎麼做呢？ – BillT 2010-01-27 21:34:23

使用for=""屬性在HTML中，像

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

在圖像：

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

jQuery, using the hover function動畫相應的ID ，同一個在：

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

來源

2010-01-27 21:40:44

@Nick Craver，這似乎很接近。那麼，如果地圖上的圖標與CreateMarker（）函數相對應，那麼我如何在Google Maps中使用它 – BillT 2010-01-27 21:50:05

事情是這樣的：

$(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-27 23:44:06

JQuery：如何更改鼠標懸停事件上的圖形？

回答

相關問題