鼠標移動mouseout javascript不起作用

Question

我試圖讓一個元素出現在客戶端的鼠標懸停在它上面，當它離開de對象但不起作用時它不起作用。這是非常簡單的代碼，我不明白爲什麼它不工作。下面是代碼：

var earlyBirds = document.getElementById("earlyBirds"); 
var block = document.getElementById("block"); 

var appearenceEB = function(){ 
    block.style.visibility = visible; 
} 

var dissappearenceEB = function(){ 
    block.style.visibility = hidden; 
} 

earlyBirds.addEventListener("mouseover", appearenceEB); 
earlyBirds.addEventListener("mouseout", dissappearenceEB); 

Answer 1

visible和hidden應該是在引號。

var appearenceEB = function(){ 
    block.style.visibility = "visible"; 
} 

var dissappearenceEB = function(){ 
    block.style.visibility = "hidden"; 
} 

Answer 2

爲了使它的功能，在window.onload包裹addEventListener如下：

HTML：

<div id="earlyBirds">earlyBirds</div> 
<div id="block">block</div> 

JS：

var appearenceEB = function(){ 
    block.style.visibility = "visible"; 
} 

var dissappearenceEB = function(){ 
    block.style.visibility = "hidden"; 
} 

window.onload = function(){ 
    earlyBirds.addEventListener("mouseover", appearenceEB); 
    earlyBirds.addEventListener("mouseout", dissappearenceEB); 
}; 

DEMO - 1

另一種方法是創建兩個單獨的功能onmouseover和onmouseout事件，如下：

HTML：

<div id="earlyBirds" onmouseover="mouseOver();" onmouseout="mouseOut();">earlyBirds</div> 
<div id="block">block</div> 

JS：

function mouseOver(){ 
    document.getElementById('block').style.visibility = "visible"; 
} 

function mouseOut(){ 
    document.getElementById('block').style.visibility = "hidden"; 
} 

DEMO - 2

更好地將您的JavaScript添加到頭標記，否則在使用JavaScript標記的正文中。此外，使用CSS如下之前知名度設置你的元素，沒有了：

CSS：

#block { 
    visibility: hidden; 
}