OnMouseHover 在 Firefox 中不起作用

发布于 2024-12-21 05:32:07 字数 813 浏览 2 评论 0原文

我做了一个简单的 onmousehover 效果，它适用于所有浏览器，但火狐浏览器除外。我已将代码精简到最低限度，但无法找出问题所在！为什么下面的鼠标悬停在 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>

原文

I have done an easy onmousehover effect and it works in all browsers, but firefox. I have stripped down the code to a bare minimum, but can't figure out whats wrong! Why doesn't the mouseover below work in 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹿童谣 2024-12-28 05:32:07

Firefox 不喜欢“text/jscript”。尝试使用“text/javascript”。

回复收藏 0 原文

欢烬 2024-12-28 05:32:07

请参阅此链接现在这是工作

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

see this link now this is work

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

and

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

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

回复收藏 0 原文

梦断已成空 2024-12-28 05:32:07

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

请注意，addEventListener 在旧版本的 Internet Explorer 中不起作用，您需要求助于黑客（或完全放弃它并使用旧的 元素。 onclick = function() { /* 在这里做一些事情... */ }; 方式）。

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

Besides the text/jscript issue, you can change your code like this: http://jsfiddle.net/RKKvt/

Please note that addEventListener does not work in older versions of Internet Explorer, and you need to resort to an hack (or drop it completely and go for the old element.onclick = function() { /* Do something here... */ }; way).

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

回复收藏 0 原文

~没有更多了~