Simon Bengtsson
Simon Bengtsson

Reputation: 8151

OnMouseHover not working in Firefox

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

Answers (3)

Albireo
Albireo

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

scrayne
scrayne

Reputation: 718

Firefox doesn't like "text/jscript". Try "text/javascript" instead.

Upvotes: 2

Sender
Sender

Reputation: 6858

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

Upvotes: 0

Related Questions