jQuery懸停問題

我想讓頁面上的元素消失並在用戶單擊另一個元素時重新出現。我的代碼如下所示：jQuery懸停問題

<script type="text/javascript"> 
    $('.affordable').hover(function() { 
     $('#reason-a').toggle(); 
    }); 
</script> 

<span class="affordable">Affordable</span> 
<span class="turnaround">Fast Turnaround</span> 
<span class="communication">Communication</span> 

<div id="reason-a">Affordable information</div>

我希望用戶能夠懸停在負擔得起的類，然後顯示在經濟實惠的信息。然後，當用戶懸停字時，信息應該消失。

非常感謝

來源

2011-05-08 dalehumphries

@dele的jsfiddle例如http://jsfiddle.net/4xruD/ – kobe 2011-05-08 16:34:01

這是腳本實際的安裝方式？你會希望把劇本的onload處理器中：

$(function(){ 
    // Register your hover events here 
});

是的原因是元素的綁定您的功能也還不存在，並選擇將返回一個空數組（所以你不真正綁定任何東西）。

切換方法交替顯示沒有參數的可見性，懸停方法作爲mouseenter和mouseleave傳入一個委託，所以我認爲建議切換到單獨的隱藏和顯示功能是不必要的。

來源

2011-05-08 16:22:47

我也同意下面的答案，你要在你的負載腳本切換/隱藏的原因，一所以也沒有最初顯示（或使用CSS來完成）。 – 2011-05-08 16:31:06

這工作出色，謝謝:) – dalehumphries 2011-05-08 16:47:38

你應該喜歡＃原因 - 一個本

新增CSS顯示沒有，所以它不會對負載

#reason-a{ 
display:none 
}

工作演示

http://jsfiddle.net顯示/ 4xruD/

將代碼包裝到document.ready中也

$(document).ready(function() { 

    $(".affordable").hover(
     function() { 
     $("#reason-a").show(); // this is mouse over 
     }, 
     function() { 
     $("#reason-a").hide(); // this is mouseout 
     } 
    ); 


});

來源

2011-05-08 16:24:32 kobe

爲光滑的解決方案。此外，我調整你的代碼使用OP非常正確地使用.toggle（）。小的變化可以在這裏找到。 http://jsfiddle.net/4xruD/2/ – 2011-05-08 16:49:51

$(document).ready(function() { 
    $('#reason-a').hide(); 
    $('.affordable').hover(
    function() { 
     $('#reason-a').show(); 
    }, 
    function() { 
     $('#reason-a').hide(); 
    }); 
});

來源

2011-05-08 16:26:48 Gats

jQuery懸停問題

回答

相關問題