OnMouseHover 在 Firefox 中不起作用答案

【问题标题】：OnMouseHover not working in FirefoxOnMouseHover 在 Firefox 中不起作用
【发布时间】：2011-12-14 21:18:12
【问题描述】：

我做了一个简单的鼠标悬停效果，它适用于所有浏览器，但火狐除外。我已将代码精简到最低限度，但无法弄清楚出了什么问题！为什么下面的鼠标悬停在 Firefox 中不起作用？

<!DOCTYPE html>
<html>
<head>
   <style>
   #box {
    background:#222;
    width:400px;
    height:300px;
    border-radius:5px;
    }

    #box_hover {
    background:#555;
    width:400px;
    height:300px;
    border-radius:5px;
    }                   
    </style>    
    <script type="text/jscript">
    function mouseover() {
        document.getElementById('box').id = 'box_hover';
    }
    function mouseout() {
        document.getElementById("box_hover").id = 'box';
    }
    </script>
</head>
<body>
    <div id="box" onmouseover="mouseover();" onmouseout="mouseout();"></div>
</body>
</html>

【问题讨论】：

标签： firefox mouseover

【解决方案1】：

Firefox 不喜欢“text/jscript”。改用“text/javascript”。

【讨论】：

【解决方案2】：

看到这个link 现在这是工作

<div id="box" onmouseover="mouseover();"></div>

和

#box {
background:#222;
width:400px;
height:300px;
border-radius:5px;
}

#box:hover {
background:#555;
width:400px;
height:300px;
border-radius:5px;
}

【讨论】：

【解决方案3】：

除了text/jscript 问题之外，您还可以像这样更改代码：http://jsfiddle.net/RKKvt/

请注意addEventListener 在旧版本的 Internet Explorer 中不起作用，您需要求助于an hack（或完全放弃它并使用旧的element.onclick = function() { /* Do something here... */ }; 方式）。

HTML

<div id='test'></div>

CSS

#test {
    background-color: red;
    height: 100pt;
    width: 100pt;
}

JavaScript

document.getElementById('test').addEventListener('mouseover', function () {
    this.setAttribute('style', 'background-color: green;');
}, false);

document.getElementById('test').addEventListener('mouseout', function () {
    this.setAttribute('style', '');
}, false);

【讨论】：