在懸停上顯示一個隨機元素，Jquery

Question

我希望每次將鼠標放在該圖標上時都會顯示一個隨機段落元素，並在鼠標離開時再次隱藏。

下面是段落的HTML和標識：

<div> 
<p class="quote" >ryan is a champion at indesign</p> 
<p class="quote">ryan is not a champion at javascript</p> 
<p class="quote">ryan likes ramen</p> 
</div> 

<a href="#"><img id="logo" src="../_blog/_assets/_logo_icons/_logo.png" alt="logo" /></a> 

這個腳本是迄今爲止的滿足此我發現的最接近：

$('p.quote').hide(); 

var quotes = $('p.quote'); 
var rand = Math.floor(Math.random() * quotes.length); 

$('#logo').hover(function(){ 
    quotes.eq(rand).toggle(); 

    }); 

可惜，這只是顯示了同樣的報價每次除非我刷新頁面。還有其他建議嗎？

感謝 瑞安

Answer 1

移動開始var rand進入懸停功能，而不是外面的線。

然後改變：

quotes.eq(rand).toggle(); 

要：

quotes.hide().eq(rand).show(); 

您還需要修改.hover（），以便它隱藏了報價，當他們停止徘徊。

下面是完整的代碼：

var quotes = $('p.quote'); 

$('#logo').hover(
    function() { 
    var rand = Math.floor(Math.random() * quotes.length); 
    quotes.hide().eq(rand).show(); 
    }, 
    function() { 
    quotes.hide() 
    } 
); 

Answer 2

移動var rand = Math.floor(Math.random() * quotes.length);您懸停處理程序中，像這樣：

$('#logo').hover(function(){ 
    var rand = Math.floor(Math.random() * quotes.length); 
    quotes.eq(rand).toggle(); 

    }); 

通過這種方式，它會更新蘭特每次

Answer 3

工作在這裏撥動：http://jsfiddle.net/wEnAW/7/