JQuery綁定mouseenter事件不執行功能

Question

我試圖讓我的頁面上顯示一個div，當我將鼠標懸停在圖標上時。代碼的完整的「系統」是一個有點複雜，但...

方案
在頁面加載的用戶可以看到顯示當前天氣狀況對他/她的區域的小酒吧。當用戶將鼠標懸停在此欄上時，會在其下方顯示更大的div，並在其中顯示更詳細的預測和圖標，以代表該國其他地區當前的天氣情況。

當用戶將鼠標懸停在這些圖標上時，應該出現一個更詳細的天氣預報（或者可能作爲工具提示），用於懸停的圖標所代表的區域。

結構
因爲雅虎天氣API轉發的HTML是醜陋的，我寫我的jQuery重寫它輸出如下：

<div id="weather"> 
    <div id="weather-feed"> 
     <div class="weather-conditions">Mostly Cloudy, 23 C</div> 
     <div class="weather-icon"> 
      <img src="http://l.yimg.com/a/i/us/we/52/28.gif"><span>Pretoria</span> 

     </div> 
    </div> 
    <div class="weather-more-button">+</div> 
    <div class="weather-extra"> 
     <div class="weather-forecast"> 
      <p style="font-size: 13pt;"><b>Forcast for your area:</b> 

      </p>Thu - Mostly Clear. High: 25 Low: 14 
      <br>Fri - Mostly Sunny. High: 25 Low: 17 
      <br>Sat - Mostly Sunny. High: 28 Low: 18 
      <br>Sun - Sunny. High: 31 Low: 17 
      <br>Mon - Sunny. High: 31 Low: 17 
      <br> 
      <br><a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a> 

     </div> 
     <table width="100%"> 
      <tbody> 
       <tr> 
        <td align="center" width="33%"> 
         <img class="jhb" src="http://l.yimg.com/a/i/us/we/52/3200.gif"> 
        </td> 
        <td align="center" width="33%"> 
         <img class="dbn" src="http://l.yimg.com/a/i/us/we/52/30.gif"> 
        </td> 
        <td width="33%" align="center"> 
         <img class="cpt" src="http://l.yimg.com/a/i/us/we/52/34.gif"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center">JHB</td> 
        <td align="center">DBN</td> 
        <td align="center">CPT</td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="jhbw"> 
      <hr> 
      <p style="font-size: 13pt;"><b>Forcast for Johannesburg:</b> 

      </p> 
      <br>Thu - Mostly Clear. High: 22 Low: 11 
      <br>Fri - Mostly Sunny. High: 22 Low: 14 
      <br>Sat - Mostly Sunny. High: 26 Low: 15 
      <br>Sun - Sunny. High: 27 Low: 14 
      <br>Mon - Sunny. High: 28 Low: 13 
      <br> 
      <br> 
     </div> 
    </div> 
</div> 

注意，這裏顯示的所有氣象數據是動態產生。

JQuery的
我已經使用了mouseenter和鼠標離開事件jQuery代碼綁定到不同的功能綁定，方便懸停事件：

var showWeather = function (target) { 
    var div = $(target); 
    console.clear(); 
    div.css("display", "block"); 
} 
var hideWeather = function (target) { 
    var div = $(target); 
    div.css("display", "none"); 
} 
$("img.jhb").bind({ 
    mouseenter: function() { showWeather("jhbw") }, 
    mouseleave: function() { hideWeather("jhbw") } 
}); 
var showExtra = function() { 
    var extra = $(".weather-extra"); 
    extra.css("display", "block"); 
} 

var hideExtra = function() { 
    var extra = $(".weather-extra"); 
    extra.css("display", "none"); 
} 

$("#weather").bind({ 
    mouseenter: showExtra, 
    mouseleave: hideExtra 
}); 

問題
目前，只有最後一個函數（showExtra, hideExtra）和#weather上的綁定似乎可以正常工作。我在showWeather函數中的console.clear（）中添加了這個函數，以便通過控制檯立即看到函數是否正在執行。事實並非如此。

我已經發布了的jsfiddle在http://jsfiddle.net/a3fRM/2/

我看不到我做了什麼錯在這裏。在我看來，這兩種綁定應該以完全相同的方式工作。

如果有人能看到出了什麼問題，我會非常感激。

我意識到這可能是非常具體的，所以如果你必須關閉的問題，但至少等待，從而使他人能夠回答

Answer 1

你傳入「jhbw」之類的目標，然後使用$（目標）.-> $（「jhbw」）與任何東西都不匹配。

使用類似：

var showWeather = function (target) { 
    var div = $("div ."+target); 
    console.clear(); 
    div.css("display", "block"); 
}