Javascript 网页鼠标悬停的缺点

因此，我目前正在创建一个“按钮”，其中包含多个图像，就像幻灯片一样，每当我将鼠标移到按钮上时，图像都会变为另一个图像

但是，每当幻灯片图像发生更改时，鼠标悬停效果将被删除为鼠标悬停状态，因为从技术上讲，鼠标不再位于图像上

我也尝试过为我的按钮设置淡入淡出效果，但是我的大多数搜索结果都使用了悬停功能，而不是MouseOver和MouseOut

所以我想知道Hover在潜在功能方面是否比MouseOver更好

是否可以在悬停时暂停幻灯片放映事件等？我该怎么做呢

这是我目前的代码：

function.js

$(function () {

    $('#01 img:gt(0)').hide();
    setInterval(function () {
        $('#01 :first-child').fadeOut(1500)
           .next('img').fadeIn(1500)
           .end().appendTo('#01');
    },
      3000);
});

$(document).ready(function () {

    $("#image1").mouseover(function () {
        $(this).attr("src", "images/board_01_over.jpg");
    });

    $("#image1").mouseout(function () {
        $(this).attr("src", "images/board_01_01.jpg");
    });
});

    #board {
    float: left;
    width: 998px;
    overflow: hidden;
}


.fadein {

    float: left;
    position: relative;
    width: 240px;
    height: 140px;
    margin: 1px 1px 1px 1px;
}

    .fadein img {
        position: absolute;
        left: 0;
        top: 0;
        height: 140px;
        opacity: 0.6;
        overflow: hidden;
    }

        .fadein img:hover {
            opacity: 1;
        }

main.css

$(function () {

    $('#01 img:gt(0)').hide();
    setInterval(function () {
        $('#01 :first-child').fadeOut(1500)
           .next('img').fadeIn(1500)
           .end().appendTo('#01');
    },
      3000);
});

$(document).ready(function () {

    $("#image1").mouseover(function () {
        $(this).attr("src", "images/board_01_over.jpg");
    });

    $("#image1").mouseout(function () {
        $(this).attr("src", "images/board_01_01.jpg");
    });
});

    #board {
    float: left;
    width: 998px;
    overflow: hidden;
}


.fadein {

    float: left;
    position: relative;
    width: 240px;
    height: 140px;
    margin: 1px 1px 1px 1px;
}

    .fadein img {
        position: absolute;
        left: 0;
        top: 0;
        height: 140px;
        opacity: 0.6;
        overflow: hidden;
    }

        .fadein img:hover {
            opacity: 1;
        }

Main.html

     <div id="board">
         <div class="fadein" id="01">
             <img src="images/board_01_01" id="image1" />

             <img src="images/board_01_02.jpg" id="image2" />
         </div>

     </div>

---

因为您使用的是jQuery，所以可以使用

hover（）函数


对你来说，制作一个小物体更容易，所以更容易控制

var Slideshow = {
    interval:null,

    start: function () {
        ...
        initialize
        ...
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    },

    next: function () {
        /*
         * You cannot refer to the keyword this in this function
         * since it gets executed outside the object's context.
         */
        ...
        your logic
        ...
    },

    stop: function () {
        window.clearInterval(this.interval);
    }
};

现在你可以很容易地打电话了

Slideshow.start();
Slideshow.stop();

从任意位置启动和停止滑块。
在mouseenter上取消计时器，在mouseleave上重新启动计时器。有两件事：jQuery的悬停与执行mouseenter和mouseleave相同。您可以使用
.fadein:hover img
或其他变体吗<代码>$（函数（）{

与

$（文档）相同{

，这样你就可以把它折叠成一个块。@epascarello如果我使用hover函数而不是mouseover/mouseout呢？它可以工作。但是在hover上暂停我的幻灯片放映事件怎么样？我是如何做到的？有没有一个例子可以用来禁用/暂停任何类型的事件？目前我只想暂停幻灯片放映事件或者悬停时的特定div，但我不知道如何操作？请举一个例子。请使用一个简单的对象文本进行

幻灯片放映

。您当前的代码不起作用。不要使用类似构造函数的方法。@Bergi是的，前面忘记了

new

操作符。但是文本是一个更好的方法。Th谢谢你的指点。