爲什麼不是這個jQuery選擇器工作？

的JavaScript：爲什麼不是這個jQuery選擇器工作？

<script> 

$('#aboutme').on('hover', function(){ 
    console.log("All the stuff"); 
    /* $("#aboutmedropdown").css("dispay","block"); */ 
}); 

</script>

HTML（CSS內嵌現在）：

  <div class="nav"> 
       <ul class="navlist"> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-home.png" alt="Navigation Home"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-about.png" id="aboutme" alt="Navigation About"></a> 
         <div id="aboutmedropdown" style="width: 150px; position: absolute; background-color: #FFFFFF;"> 
          <ul style="list-style: none; padding: 0; margin: 0; border-bottom: 5px solid #8cc419;" class="sub_menu"> 
           <li style="display: block; font-size: 16px; line-height: 20px; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">About Me</a></li> 
           <li style="display: block; font-size: 16px; line-height: 20px; color: #8CC419; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">Testimonials</a></li> 
          </ul> 
         </div> 
        </li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-yoga.png" alt="Navigation Yoga"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-pilates.png" alt="Navigation Pilates"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-fitness.png" alt="Navigation Fitness"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-media.png" alt="Navigation Media"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-fitcamp.png" alt="Navigation Fitcamp"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-blog.png" alt="Navigation Blog"></a></li> 
       </ul> 
      </div>

我檢查的元素，非常清楚的看到，我有我需要將鼠標懸停在圖像上的正確的ID - - #aboutme。

我在查看頁面源代碼，看到我的<script>和jQuery已加載。

但是，當我將鼠標懸停在ID爲aboutme的圖像上時，控制檯中沒有任何反應。

任何想法？

來源

2013-07-30 Samuel Stiles

您的腳本是否在HTML之前加載？ – jprofitt

是的，腳本在頭元素中。 –

不要使用hover與on，用mouseout或同等mouseenter mouseout（一起）：

http://jsfiddle.net/deJNU/

或者使用懸停的方法，像這樣：

$('#aboutme').hover(function() { 
    console.log('hover in'); 
}, function() { 
    console.log('hover out'); 
});

*編輯：你還缺少文件準備好了，不需要向下投票我的正確答案。

來源

2013-07-30 19:30:57

所有4個答案都缺少on方法沒有懸停的觀點。感謝您投下我的正確答案。（儘管doc準備好也是我沒有注意到的問題） –

所有的downvotes都被推遲了 - 這解決了我的問題。必須使用mouseenter，而不是懸停（以及準備好文檔）。將計時器在2分鐘內啓動時標記爲答案。謝謝！！！！！！！！！！！ –

'在jQuery 1.8中不推薦使用，在1.9中移除：名稱「hover」用作字符串「mouseenter mouseleave」的簡寫。它爲這兩個事件附加一個事件處理程序，處理程序必須檢查event.type以確定該事件是mouseenter還是mouseleave。不要將「懸停」僞事件名稱與接受一個或兩個函數的.hover（）方法混淆。[DOC]（http://api.jquery.com/on/#additional-notes） –

試試這個：

$(document).ready(function(){ 
    $(document).on('hover', '#aboutme' , function(){ 
     console.log("All the stuff"); 
     /* $("#aboutmedropdown").css("dispay","block"); */ 
    }); 
});

來源

2013-07-30 19:27:24

還行不通 –

無論是後移動<script>標籤#aboutme（最好是右</body>之前）或使用：

//equivalent to $(document).ready(function() { 
$(function() { 
    $('#aboutme').on('hover', function() {

來源

2013-07-30 19:28:01

這樣做還是不行，看：livingfit.wordpress.redcow.ca –

嘗試使用這種方式：

$(document).on('hover', '#aboutme', function(){ 
    console.log("All the stuff"); 
    /* $("#aboutmedropdown").css("dispay","block"); */ 
});

來源

2013-07-30 19:28:18 MonkeyZeus

我這樣做了，還是不行，看這裏：livingfit.wordpress.redcow.ca –

爲什麼不是這個jQuery選擇器工作？

回答

相關問題