2010-02-12 123 views
2

我有,當你將鼠標懸停在某個圖像顯示一個div:的jQuery DIV閃爍

$('#link-test-img').mouseenter(function() { 
     $('#popup-test').css('display','block'); 
    }); 
    $('#link-test-img').mouseleave(function() { 
     $('#popup-test').css('display','none'); 
    }); 

當然鼠標離開只是調用,以股利不可見當鼠標離開圖像,不而它的移動呢?

謝謝。

回答

4

如果彈出窗口顯示在鼠標下,img將調用mouseleave函數。確保您的彈出窗口不會在鼠標下直接顯示

編輯:

$('#link-test-img').mouseenter(function() { 
    $('#popup-test').css('display','block'); 
}); 

$('#popup-test').mouseleave(function() { 
    $('#popup-test').css('display','none'); 
}); 

阿卡,讓它顯示出來,當你進入的形象,但是當你離開彈出消失。

+0

謝謝你是對的。但它不能解決問題。我需要div在它佔據圖像區域時仍然出現。 – wahkal 2010-02-12 16:18:29

+0

在那裏,我添加了一個* should *的編輯。當然,我看不到你的HTML佈局或類似的東西,所以我不能保證任何東西。 – 2010-02-12 16:24:15

0

John Gietzen給出了很好的建議。讓我詳細說一下。如果你的#popup-test div顯示在鼠標下,mouseleave事件將會觸發#link-test-img。

現在,如果#popup-test div本身就是一個圖像,並且意在替換被矇住的圖像,則可以使用IMG元素background-image的一個很少使用的CSS屬性。在這種情況下,您可以創建一個透明的PNG(即,透明度爲0的透明PNG,以便所有內容都可以透過它顯示)到第一個圖像的尺寸,然後分配PNG的背景圖像樣式,即我們將在這裏調用clear.png,併爲#link-test-img的源URL指定一個「clear01」的ID。

在CSS中,您將設置樣式規則

background-image: url(http://your.link-test-img.url); 

在Javascript中,你會這樣設置:

document.getElementById("clear01").style.backgroundImage = "url(http://your.link-test-img.url)"; 

在jQuery中你會說:

$('#clear01').mouseenter(function() { 
    $('#link-test-img').css('background-image','url(http://your.link-test-img.url)'); 
}); 
$('#clear01').mouseleave(function() { 
    $('#link-test-img').css('background-image','url(http://your.popup-test-img.url)'); 
}); 

你在所有這些事件發生時不必經歷大量的旋轉和失敗。但是,正如我上面提到的,這隻有在彈出測試div僅用於顯示不同圖像時纔有效。如果它顯示不同的內容,並在鼠標下彈出,請不要將mouseleave函數事件處理程序分配給第一個圖像。相反,它分配給彈出測試DIV,你有上述相同的代碼,像這樣:

$('#link-test-img').mouseenter(function() { 
    $('#popup-test').css('display','block'); 
}); 
$('#popup-test').mouseleave(function() { 
    $('#popup-test').css('display','none'); 
}); 

如果DIV沒有鼠標,即下彈出,這是越來越別處頁面上顯示,並且您希望原始link-test-img保持在視圖中,而這不會發生,您還有其他問題。在這種情況下,如果您可以提供更多的代碼或指向頁面,您可以獲得更詳細的幫助。

希望這會有所幫助。