Reputation: 8151
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>
Upvotes: 0
Views: 3135
Reputation: 11095
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);
Upvotes: 0
Reputation: 718
Firefox doesn't like "text/jscript". Try "text/javascript" instead.
Upvotes: 2