Javascript mouseenter/mouseleve仅工作一次

我制作了一个图像滑块，使图像从左向右移动，我想在用户将鼠标移到图像上时增大它们的大小，而在鼠标离开时减小它们的大小。这是可行的，但只有一次。我想这可能与我如何声明事件侦听器有关。下面是一个工作示例：下面是我的代码：

<script>
    var images = [];
    var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var cycle;
    var hoverImagePosition;

    window.onload = function scrolling() {
        for (i = 0; i < 10; i++) {
            images.push(document.getElementById("scrollingImage" + i));
            if (document.addEventListener) {
                // For all major browsers, except IE 8 and earlier
                document.getElementById("scrollingImage" + i).addEventListener("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).addEventListener("mouseleave", imageSmaller);
            } else if (document.attachEvent) {
                // For IE 8 and earlier versions
                document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
            }
        }
        cycle = setInterval(frame, 100);
    };

    function frame() {
        for (x = 0; x < 10; x++) {
            if (imagePosition[x] == 100) {
                imagePosition[x] = 0;
            } else {
                imagePosition[x] = imagePosition[x] + 1;
                images[x].style.left = imagePosition[x] + '%';
            }
        }
    }

    function imageBigger() {
        clearInterval(cycle);
        this.style.zIndex = 1;
        this.style.width = 25 + "%";
        hoverImagePosition = parseInt(this.style.left) - 2.5;
        this.style.left = hoverImagePosition + "%";
    }

    function imageSmaller() {
        cycle = setInterval(frame, 100);
        this.style.zIndex = -1;
        this.style.width = 20 + "%";
        hoverImagePosition = parseInt(this.style.left) + 2.5;
        this.style.left = hoverImagePosition + "%";
    }

</script>

---

我认为答案与你将zIndex设置为-1有关。这可能会将图像放在div/whatever后面，这就是它不再工作的原因

将z索引更改为0而不是-1

var图像=[]； var imagePosition=[0,0,0,0,0,0,0,0,0]； var循环； 向量自回归位置； window.onload=函数滚动{ 对于i=0；i<10；i++{ images.pushdocument.getElementByIdscrollingImage+i； if document.addEventListener{ //适用于除IE 8和更早版本之外的所有主要浏览器 document.getElementByIdscrollingImage+i.addEventListenermouseover，imageBigger； document.getElementByIdscrollingImage+i.addEventListenermouseout，图像较小； }否则，如果document.attachEvent{ //适用于IE8及更早版本 document.getElementByIdscrollingImage+i.AttachEventMouseCenter、ImageBiger； document.getElementByIdscrollingImage+i.attachEventmouseleave，图像较小； } } 循环=设置间隔帧，100； }; 功能框架{ 对于x=0；x<10；x++{ 如果imagePosition[x]==100{ imagePosition[x]=0； }否则{ imagePosition[x]=imagePosition[x]+1； 图像[x].style.left=imagePosition[x]+'%'； } } } 函数图像更大{ 间隔周期； this.style.zIndex=1； this.style.width=25+%； hoverImagePosition=parseIntthis.style.left-2.5； this.style.left=hoverImagePosition+%； } 函数图像更小{ 循环=设置间隔帧，100； this.style.zIndex=0； this.style.width=20+%； hoverImagePosition=parseIntthis.style.left+2.5； this.style.left=hoverImagePosition+%； } 横幅

实时是OSSIM

---

为什么你不只用一个样式表？为什么另一篇文章的问题基本相同？完全不是同一个问题。相同的代码，不同的问题。这是怎么回事？另一个问题是，图像从鼠标指针移开，但仍然保持鼠标悬停的效果，这是不应该的，因为它们从鼠标指针移开了。我通过完全在鼠标悬停上停止图像的运动来解决这个问题，并产生了这个新问题。老问题仍未解决。pvg建议使用elementFromPoint，但这确实有很好的跨浏览器兼容性。哇，这通常是一些愚蠢的错误，在8个小时的JS之后-谢谢你这么快就指出了这一点，你帮了我一个大忙！谢谢你的意见！