javascript onmouseout 不工作

Question

基本上我将翻转从我的 css 转换为 javascript。我还选择了其中一张页面加载后要选择的图片。但是我在处理 onMouseOut 事件时遇到了麻烦。除了那张照片，一切都很完美。当我将鼠标悬停在其他图片上时，该图片仍处于选中状态。我尝试了多种方法，但不知道如何修复它。有什么想法吗？

<script type="text/javascript">

window.onload=function(){
clicked3();
}

function clicked3(){
document.getElementById("clicked3").style.backgroundPosition = "-198px top";
}

function handleOver3() { 
 if (document.getElementById("clicked3")) document.style.backgroundPosition="-198px top";
 }


function handleOut3() {
 if (document.getElementById("clicked3")) document.style.backgroundPosition="0px top";
}

</script>

Answer 1

您没有显示 onmouseover 和 onmouseout 事件的处理程序注册？下一个代码示例可能会对您有所帮助。

HTML:

<div id='clicked1' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />
<div id='clicked2' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />
<div id='clicked3' style='width:140px;height:183px;background:URL(http://t3.gstatic.com/images?q=tbn:ANd9GcQbcDkaRcrbsYFUcE6Q7n56_LJr-r4mDqYTOTtPKG9J0MzZcV6V)' />

脚本:

<script type="text/javascript">

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    clicked.call(domClicked1);
    clicked.call(domClicked2);
    clicked.call(domClicked3);
    domClicked1.onmouseover=
    domClicked2.onmouseover=
    domClicked3.onmouseover=handleOver; // but you must switch to use addEventListener (or attachEvent for IE8 and less)
    domClicked1.onmouseout=
    domClicked2.onmouseout=
    domClicked3.onmouseout=handleOut;
}

function clicked(){
    this.style.backgroundPosition = "-140px top";
}

function handleOver() {
    this.style.backgroundPosition = "0px top";
}

function handleOut() {
    this.style.backgroundPosition = "-140px top";
}

</script>

http://jsfiddle.net/J2SrF/