OnMouseHover不工作在Firefox

我做了一個簡單的onmousehover效果，它適用於所有瀏覽器，但firefox。我已經將代碼剝離到最低限度，但無法弄清楚什麼是錯的！爲什麼下面的鼠標懸停工作在Firefox？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>

來源

2011-12-14 Simon Bengtsson

Firefox不喜歡「文/ JScript的」。嘗試使用「text/javascript」代替。

來源

2011-12-14 03:42:55 scrayne

看到這個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; 
}

來源

2011-12-14 03:30:35 Sender

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

來源

2011-12-14 13:18:12 Albireo

OnMouseHover不工作在Firefox

回答

相關問題