javascript onmouseout 不工作答案

【问题标题】：javascript onmouse out not workingjavascript onmouseout 不工作
【发布时间】：2011-09-07 09:21:30
【问题描述】：

基本上，我将翻转从我的 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>

【问题讨论】：

你在handleOver中的backgroundPosition和加载时是一样的
嗯，是的，我还希望将鼠标悬停在该图片上时改变它。它首先被选中，但是当我悬停其他图片时，我希望它被取消选择。一旦我再次将鼠标悬停在它上面，我希望它再次被选中
你能提供与问题相关的html吗？
也使用类：第一张图片使用第一类，第二张图片使用第二类。悬停时，检查它是哪个类，然后切换到另一个类。如果你这样做，每次你将鼠标悬停在图像上，它仍然是一样的
当我将 onmouseover 和 onmouseout 事件放在我的 html 中时，它工作得非常好，但我希望它完全是 javascript。

标签： javascript css onmouseover background-position onmouseout

【解决方案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/

【讨论】：

您必须为所有图片分别添加 onmouseover 和 onmouseout。查看更新后的帖子。
它以某种方式起作用，但这就像调用所有函数 onload.. 它从一开始就加载所有图片，并将其中一些图片弄乱了。我还在努力..
我还没有找到任何解决方案。就像现在将鼠标悬停在 clicked1 图片上时，clicked1 pic 保持未选中状态而 clicked3 pic 仍处于选中状态......有什么想法吗？
如果我不从一开始就调用其他函数就可以了
我不明白什么是如果我不从一开始就调用其他函数，它会起作用 但是（正如我在帖子中所写）你必须使用 addEventListener：@987654322 @ 或 attachEvent：msdn.microsoft.com/en-us/library/ms536343%28v=vs.85%29.aspx 以获得最佳效果。例如：if(window.addEventListener) {domClicked1.addEventListener('mouseover',handleOver,false);domClicked2.addEventListener('mouseover',handleOver,false);/*对于所有元素*/}else if(window.attachEvent ){domClicked1.attachEvent('onmouseover',handleOver);/*对于所有元素*/}

【解决方案2】：

它是这样工作的！

window.onload=function() {


    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    var domClicked4=document.getElementById("clicked4");



    clicked3.call(domClicked3);

    domClicked1.onmouseover=handleOver1;
    domClicked1.onmouseout=handleOut1;

    domClicked2.onmouseover=handleOver2;
    domClicked2.onmouseout=handleOut2;

    domClicked3.onmouseover=handleOver3; 
    domClicked3.onmouseout=handleOut3;

    domClicked4.onmouseover=handleOver4;
    domClicked4.onmouseout=handleOut4;

}


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

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

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

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




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

function handleOver3() {
    this.style.backgroundPosition = "-198px top";
}

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

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

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

【讨论】：