鼠标悬停鼠标悬停javascript不起作用答案

【问题标题】：Mouseover mouseout javascript not working鼠标悬停鼠标悬停javascript不起作用
【发布时间】：2015-08-08 11:59:44
【问题描述】：

我试图让一个元素在客户的鼠标悬停在它上面时出现，并在它离开对象但它不起作用时消失。这是非常简单的代码，我不明白为什么它不起作用。代码如下：

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

【问题讨论】：

请同时添加您的html代码。
它缺少引号，可见和隐藏被连接为一个字符串

标签： javascript css javascript-events

【解决方案1】：

要使其正常运行，请将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 添加到 head 标记中，否则使用 javascript 标记在正文中。此外，使用 CSS 将您的元素优先可见性设置为无，如下所示：

CSS：

#block {
    visibility: hidden;
}

【讨论】：

【解决方案2】：

visible 和 hidden 应该用引号引起来。

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

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

【讨论】：