Javascript addEventListener - 用於創建鼠標懸停效果？

我有一個ID爲「button」的div。當我懸停時（不使用CSS懸停選擇器），我試圖將其背景更改爲藍色。Javascript addEventListener - 用於創建鼠標懸停效果？

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 

function func() 
{ 
    var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
}

然而，這只是設置項的顏色爲藍色，當我徘徊，但它不重置爲白色後，我移動鼠標了。我該如何解決這個問題？（順便說一句，mouseenter和mouseleave不會與這看起來工作）。

來源

2011-11-29 antonpug

您將需要設置一個類似的事件來處理mouseout。在鼠標事件功能中，您可以將顏色更改回原始顏色。

var item = document.getElementById("button"); 
item.addEventListener("mouseover", func, false); 
item.addEventListener("mouseout", func1, false); 

function func() 
{ // not needed since item is already global, 
    // I am assuming this is here just because it's sample code? 
    // var item = document.getElementById("button"); 
    item.setAttribute("style", "background-color:blue;") 
} 

function func1() 
{ 
    item.setAttribute("style", "background-color:green;") 
}

來源

2011-11-29 22:26:22 AndrewR

啊......太好了！我在div裏面有一張圖片，它認爲「out」，有什麼方法來掩飾它，所以它仍認爲它在盒子內？ – antonpug

是的，mouseover和mouseout事件也會捕獲所有來自子項目的事件（並且它們會冒泡）。在你的函數中，你必須比較事件參數的relatedTarget（W3C）或Target/fromTarget（IE）屬性。看看這個鏈接瞭解更多信息：http://www.quirksmode.org/js/events_mouse.html#relatedtarget – AndrewR

捕獲父容器並且不處理子元素中的任何內容是很多工作。除非你有任何特定的原因，否則你可以通過使用jQuery的'hover（）'函數來簡化你的代碼。 – AndrewR

您是否試過mouseout？（不幸的是，事件「mouseover」的命名很糟糕 - 如果它被稱爲「mousein」會更好，因此它更明顯，更直觀地與「mouseout」相反。但這只是其中的一個不一致的事件）

我認爲mouseenter和mouseleave是其他瀏覽器可能不支持的IE事件 - 儘管我認爲jQuery也支持這些事件。

來源

2011-11-29 22:27:41 nnnnnn

mouseout的作品...但也有像mousein的東西？ mousein不起作用 – antonpug

不，不，沒有「mousein」。這兩個事件絕對是「鼠標懸停」和「鼠標懸停」。我的意思是，現有的「鼠標懸停」事件應該被稱爲「mousein」，以便與「mouseout」相反。但事實並非如此。我編輯了我的答案，試圖讓這一點更清晰。 – nnnnnn

Javascript addEventListener - 用於創建鼠標懸停效果？

回答

相關問題