javascript onmouse out不工作

基本上，我将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>

window.onload=function（）{
点击3（）；
}
函数clicked3（）{
document.getElementById（“clicked3”）.style.backgroundPosition=“-198px top”；
}
函数handleOver3（）{
if（document.getElementById（“clicked3”））document.style.backgroundPosition=“-198px top”；
}
函数handleOut3（）{
if（document.getElementById（“clicked3”））document.style.backgroundPosition=“0px top”；
}

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

HTML:

脚本：

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

window.onload=function（）{
var domClicked1=document.getElementById（“clicked1”）；
var domClicked2=document.getElementById（“clicked2”）；
var domClicked3=document.getElementById（“clicked3”）；
点击。调用（domClicked1）；
clicked.call（domClicked2）；
点击呼叫（domClicked3）；
domClicked1.onmouseover=
domClicked2.onmouseover=
domClicked3.onmouseover=handleOver；//但您必须切换到使用addEventListener（或用于IE8及以下版本的attachEvent）
domClicked1.onmouseout=
domClicked2.onmouseout=
domClicked3.onmouseout=handleOut；
}
函数单击（）{
this.style.backgroundPosition=“-140px top”；
}
函数handleOver（）{
this.style.backgroundPosition=“0px top”；
}
函数handleOut（）{
this.style.backgroundPosition=“-140px top”；
}

它是这样工作的

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

---

你在handleOver中的背景位置与加载时相同是的，我也希望在我悬停在它上面时图片会发生变化。它是第一次被选中，但当我悬停其他图片时，我希望它被取消选中。一旦我再次将鼠标悬停在它上面，我希望它再次被选中。你提供与问题相关联的html吗？使用太类：第一张图片使用类1，第二张图片使用类2。悬停时，检查它是哪个类，然后切换到另一个类。如果你喜欢这样做，每次你停留在图像上，它仍然是相同的。当我把onmouseover和onmouseout事件放在我的html中时，它工作得非常好，但我希望它完全是javascript。你必须为所有图片分别添加onmouseover和onmouseout。请参阅更新后的帖子。它不知怎么起作用，但这就像在加载时调用所有函数一样。。它从一开始就加载所有图片，并将其中一些图片弄乱。我仍在努力我还没有找到任何解决办法。。这就像我现在在点击的图片上悬停时，点击的图片保持未选中状态，点击的图片仍然处于选中状态……有什么想法吗？如果我一开始就不调用其他函数，它会起作用我不明白如果我一开始不调用其他函数，它会起什么作用，但是（正如我在帖子中所写的）必须使用addEventListener:或attachEvent:才能获得最佳结果。例如：if（window.addEventListener）{domClicked1.addEventListener（'mouseover'，handleOver，false）；domClicked2.addEventListener（'mouseover'，handleOver，false）；/*用于所有元素*/}否则if（window.attachEvent）{domClicked1.attachEvent（'onmouseover'，handleOver）；/*用于所有元素*/}

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