將處理程序綁定到jQuery對象中的元素以影響元素的子元素

我想將mouseenter和mouseleave的處理程序綁定到使用jQuery選擇器抓取的一組元素。該功能需要對元素的子元素進行操作。將處理程序綁定到jQuery對象中的元素以影響元素的子元素

這裏是我的代碼：

$(document).ready(function(){ 
    $(".topnav-link").bind("mouseenter mouseleave", function() { 
     $(this).children(".topnav").toggle(); 
    }); 
});

，並在HTML的身體：

<ul id="nav"> 
    <li> 
     <a class="topnav-link" href="some-url"> 
      <img class="topnav" src="nav-about-us.png" /> 
      <img class="topnav hidden" src="/images/site/nav-about-us-on.png" /> 
     </a> 
    </li> 
    <li> 
     <a class="topnav-link" href="some-url'}"> 
      <img class="topnav" src="nav-products.png" /> 
      <img class="topnav hidden" src="/images/site/nav-products-on.png" /> 
     </a> 
    </li> 
    <li> 
     <a class="topnav-link" href="some-url"> 
      <img class="topnav" src="nav-contact.png" /> 
      <img class="topnav hidden" src="/images/site/nav-contact-on.png" /> 
     </a> 
    </li> 
</ul>

這實際上對正常工作的Mac /運/ FF/Safari瀏覽器，但在IE6和IE8，只有$(".topnav-link")選擇器抓取的第一個元素顯示所需的行爲。

感謝您對我失蹤的任何幫助！

來源

2009-10-21 akc

你可以做一些簡單的事情，如只是警報（'事件觸發'）;在綁定函數中，看看你的非第一個元素是否觸發事件？ – 2009-10-21 19:50:49

除非我誤解了你期望的行爲，你上面的例子在IE8中對我很好：jsbin.com/axuve/edit#output – Matt 2009-10-21 20:25:07

感謝您採取一個看看和評論，你們倆。 Matt看到你的jsbin例子後，意識到我不得不在其他地方搜尋爲什麼我的行爲沒有被展示。我感到很傻，但事實證明，我用於我的PNG的修復程序並未完全應用於第一個鏈接中的所有修補程序，並且這些修復程序對它們的影響不會正確切換。再次感謝。 – akc 2009-10-21 20:48:50

您應該使用CSS來實現所需的翻轉效果。

有關更多信息，請閱讀CSS Technique: Fast Rollovers Without Preload。

來源

2009-10-29 13:13:22

意識到這種技術，但... 設計要求是針對非網絡字體中的可點擊導航項目（因此必須是圖像或SIFR），對可變背景透明，懸停時更改，與IE6兼容。您提到的CSS技術對於更簡單的場景來說是一個明顯的選擇，您可以在A標籤中使用文本。就我而言，文本必須是圖像的一部分，所以使用CSS技術會使A標籤爲空。謝謝你提到它，但。對於遇到此線程的其他人來說，尋找乾淨，簡單的懸停效果可能會有幫助。 – akc 2009-10-30 16:32:30

將處理程序綁定到jQuery對象中的元素以影響元素的子元素

回答

相關問題