Mouseover mouseout javascript not working

Question

Я пытаюсь создать элемент, когда мышь клиента находится над ним и исчезает, когда он покидает объект, но он не работает. Это очень простой код, который я не могу понять, почему он не работает. Вот код:

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

Чтобы сделать его функциональным, завернуть addEventListener в window.onload следующим образом:

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; 
}