2011-03-10 70 views
1

我一直在爲此花費數小時。當我將一個段落中的單詞懸停(而不是單擊)時,我需要一個lightbox來彈出。我一直在嘗試不同的jQuery插件,但沒有一個工作,除非我讓這個詞成爲一個鏈接並點擊它。懸停不點擊,並有一個燈箱出現在其中的圖像

我有這樣的事情

<p>I am a yellow dog, drinking a spotted cow.<p> 

當我將鼠標懸停我的鼠標在「狗」字燈箱出現,直到我離開這個詞顯示它狗的照片。當我將鼠標懸停在「牛」上時,一個燈箱會顯示一頭牛的圖像,直到我的鼠標不再是「牛」字爲止。

回答

3

這是一種破解,但可能能夠滿足您的需求。

給出以下標記:

<p>I am a yellow <span class="test">dog</span>, drinking a spotted cow.<p> 

我們做的是建立看中箱是正常的。

$(".test").fancybox({ 
    href: "http://" 
}); 

$(".test").hover(function() { 
    $(this).click(); 
    $("#fancybox-overlay").remove(); //remove the overlay so you can close when hover off. 
}, function() { 
    $.fancybox.close(); 
}); 

jsfiddle上的示例。

+0

當我懸停在jsfiddle鏈接狗沒有發生什麼 – 2011-03-10 02:27:32

+0

我更新了小提琴,我的js的熱鏈接被阻止。 – 2011-03-10 02:40:05

+0

你從哪裏得到的CSS文件正在使用jsfiddle的圖像? – 2011-03-10 15:32:05

0

這是我剛纔做的事情。請注意左側的JavaScript資源。

http://jsfiddle.net/shrage/N8dKW/

當你將鼠標懸停在鏈接上它可以使一個非同步電話會議到發佈服務器的一些內容,這將填補這一內容的燈箱。 當你移出鏈接「AND」時,它會消失。

當您在包裝盒內「點擊」時,它將保持可見狀態,直到您「在包裝盒外點擊」爲止。

相關問題