Mouseover mouseout JavaScript無法正常工作

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

演示-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";
}

演示-2

最好使用javascript標簽將您的JavaScript添加到head標簽，否則將其添加到正文中。 另外，使用CSS將元素的先前可見性設置為無，如下所示：

CSS：

#block {
    visibility: hidden;
}