Jquery Hover以標題屬性和顯示Div

Question

經過幾個小時的修補之後，我希望有人能夠對此有所瞭解。

我有2個div並排。在右側有包含div id = list的鏈接列表。在左側有viewarea div，它將顯示懸停時鏈接的圖片和說明。所以當你將鼠標懸停在一個鏈接上時，它應該在左邊顯示一個特定於該div的div。不過，我想爲此添加一些自動化功能。

基本上懸停在列表div中的鏈接上，將切換左側div的顯示以顯示塊。將顯示圖片和描述的隱藏div ID與列表div中鏈接的title屬性命名相同。所以在懸停時，鏈接應該切換div的顯示，其id等於標題以顯示：block。

所以基本上我的腳本邏輯是這樣的：

懸停在鏈接列表格。 獲取此鏈接的標題屬性。 更改div等於上面（在#viewarea中）獲得的標題屬性以顯示塊。

因此，當鼠標懸停在猴子鏈接上時，它將採用標題「猴子」並在viewarea div中切換div id =「monkeys」的可見性。

這裏是粗糙的HTML/CSS代碼：

#list { 
width: 480px; 
float: right; 
} 

#viewarea { 
width: 480px; 
} 

<div id="list"> 

<h1> 
Animals 
</h1> 
<p> 
<a href="monkeys_link" title="monkeys">Monkeys</a> 
</p> 
<p> 
<a href=」kittens_link" title="kittens">Kittens</a> 
</p> 
<p> 
<a href="pigs_link" title="pigs">Pigs</a> 
</p> 

</div> 

<div id="viewarea"> 

<div id="monkeys" style="display: none;"> 
<img src="picture_of_monkeys.jpg"></img> 
Summary text 
</div> 

<div id="kittens" style="display: none;"> 
<img src="picture_of_kittens.jpg"></img> 
Summary text 
</div> 

<div id="pigs" style="display: none;"> 
<img src="picture_of_pigs.jpg"></img> 
Summary text 
</div> 

</div> 

這是我結束了對外部jQuery腳本。我知道我需要某種循環構造，比如.each，但我一直無法使它工作。我在正確的軌道上嗎？

$(document).ready(function() { 

var title1 = $("#list a").attr("title"); 


$("#list a").hover(
function() { 
$("#" + "title1").css("display", "block"); 
}, 
function() { 
$("#" + "title1").css("display", "none"); 
} 
); 

}); 

對不起，冗長的帖子，非常感謝。

Answer 1

$("#list") 
    // On mouseenter and mouseleave, we want to react 
    .on("mouseenter mouseleave", "a", function(e){ 
    // Find the element whose id matches our current title 
    var el = $("#" + this.title); 
    // Determine if we're entering or exiting the link 
    switch (e.type) { 
     // Show the element or hide the element 
     case "mouseenter" : el.show(); break; 
     case "mouseleave" : el.hide(); 
    } 
    }); 

演示：http://jsbin.com/amitet/2/edit