image - 翻转图像延迟重定向到 url onmouseover 但停止 onmouseout

Question

好的，我现在查看了所有答案，但找不到解决方案。

这就是我要创建的内容，我在 1 页上有多个翻转图像，每个翻转图像都有自己的 url，指向主页的特定部分。

我想要的是，当您将鼠标移到它上面时，它会显示第二张图像，并将重定向延迟到 url，直到达到 3000 毫秒，然后将用户重定向到 url。但是延迟必须停止 onmouseout 并且它不会重定向用户并且它再次显示第一张图像，所有翻转图像必须在同一页面上做同样的事情，但每个翻转都有自己的 url。

谁能帮我提供一些关于如何..

Answer 1

我会使用 CSS 和 更改图像:hover，并使用 javascript 进行重定向和超时，如下所示：

// markup
<a id="my_image_1" class="hover_linker" href="some_link_to_the_homepage.html"></a>

// styles
.hover_linker {
    width:363px;
    height:300px;
    display:block;
}
#my_image_1 {
    background-image: url('some-image.jpg');
}
#my_image_1:hover {
    background-image: url('another-image.jpg');
}

// scripts
var redirectTimeout;
$(document).ready(function() {
    $('a.hover_linker').mouseover(function(e){
        redirectTimeout = window.setTimeout(function () {
            window.location.href = $(e.target).attr("href");
        }, 3000);
    }).mouseout(function(){
        window.clearTimeout(redirectTimeout);
    });
});