Question

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

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

我想要的是当你将鼠标移到它上面时它会显示第二个图像，它会将重定向延迟到网址，直到它达到3000毫秒，然后将用户重定向到网址。但延迟必须在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);
    });
});

滚动图像延迟重定向到url onmouseover但停止onmouseout

1 个答案: