Question

我做了一个简单的onmousehover效果，它适用于所有浏览器，但Firefox。我已经将代码剥离到最低限度，但无法弄清楚什么是错误的！为什么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>

Answer 1

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

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

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

OnMouseHover无法在Firefox中运行

3 个答案: