OnMouseHover не работает в Firefox - PullRequest
Новая
       33

OnMouseHover не работает в Firefox

0 голосов
/ 14 декабря 2011

Я сделал легкий эффект над движением мыши, и он работает во всех браузерах, кроме 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>

Ответы [ 3 ]

2 голосов
/ 14 декабря 2011

Firefox не любит "text / jscript".Вместо этого попробуйте "text / javascript".

0 голосов
/ 14 декабря 2011

Помимо проблемы text/jscript, вы можете изменить свой код следующим образом: http://jsfiddle.net/RKKvt/

Обратите внимание, что addEventListener не работает в старых версиях Internet Explorer, и вам нужно прибегнуть к взломать (или полностью отбросить его и перейти к старому 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);
0 голосов
/ 14 декабря 2011

см. ссылка теперь это работа 

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