javascript onmouseover和onmouseout问题

好的，我有一个javascript滚动。我希望在开始时选中clicked3图片，当我滚动它或滚动其他图片时，将取消选中clicked3。我的html中的图片ID是：clicked1、clicked2、clicked3、clicked4。我已经完成了这个代码，但它不工作。似乎picture1滚动未工作，picture3未开始选择。。。有什么帮助吗

window.onload=function() {
    var domClicked1=document.getElementById("clicked1");
    var domClicked2=document.getElementById("clicked2");
    var domClicked3=document.getElementById("clicked3");
    var domClicked3=document.getElementById("clicked4");

    clicked1.call(domClicked1);
    clicked2.call(domClicked2);
    clicked3.call(domClicked3);
    clicked4.call(domClicked4);

    domClicked1.onmouseover=handleOver1;
    domClicked2.onmouseover=handleOver2;
    domClicked3.onmouseover=handleOver3;
    domClicked3.onmouseover=handleOver4; 


    domClicked1.onmouseout=handleOut1;
    domClicked2.onmouseout=handleOut2;
    domClicked3.onmouseout=handleOut3;
    domClicked4.onmouseout=handleOut4;

}

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

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

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



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

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

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

---

试着删除一些代码，一个问题一个问题地解决你的问题。例如，首先尝试显示picture3，从选中的开始，然后再从那里开始编码。

首先，对于所有元素，您应该只使用一个事件侦听器。将事件侦听器交给包含元素的父级，并使用

e.target

引用正在单击的事件侦听器。一个事件侦听器用于鼠标悬停，一个用于鼠标悬停，另一个用于单击。这将节省资源

然后，不要动态更改CSS属性，而是为给定的类名设置CSS规则，并使用JavaScript仅添加/删除该类

---

此外，当您更改与CSS协调的背景时，您应该始终使用相同的方法，例如，如果您在一个坐标上使用像素，则在另一个坐标上也使用像素，如

“-198px 0”

，而不是

“-198px 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;

}

---

您不使用jQuery的具体原因是什么？因为我工作的代理希望这样做。。有什么帮助吗？我想你应该说服你的经纪人这只是个坏主意。我试过了。。如果你有答案就好了。。我想我会使用jquery，但我不认为他会接受它。picture3被选中并与if-put:window.onload=function（）{clicked3（）；}function clicked3（）{document.getElementById（“clicked3”）.style.backgroundPosition=“-198px top”}

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