显示图像后，有悬停在一个链接1500ms

Show image after there is hover on a link for 1500ms

本文关键字：一个 1500ms 链接 图像 显示图 悬停 显示      更新时间：2023-09-26

我想在hover连接至少1500ms或click之后显示image。如何在显示图像时实现这个最小周期悬停条件?

图像应该保持可见，直到鼠标悬停在链接或其本身。,当鼠标移出两者时应该消失。我该如何实现呢?提前感谢!

http://jsfiddle.net/sSBxv/

$('a').click(function() {
          alert(1); // alert on click
      })
      .hover(function() { // when mouse is entering
          var $this = $(this);
          // set timeout, save timeout id on element to clear later
          $this.data('timeout', setTimeout(function() {
              $this.click(); // click after 1500ms
          }, 1500));
       }, function() { // when mouse is leaving
              clearTimeout($(this).data('timeout')); // stop the timeout
       });

试试这个

var hoverTimer;
$("linkSelector").hover(function() {
  hoverTimer = setTimeout(function() {
    $("imgSelector").show();
  }, 1500);
}, function(){
   clearTimeout(hoverTimer);
}).click(function(){
   clearTimeout(hoverTimer);
   $("imgSelector").show();
});

大意是……

$("#MyLinkSelectorId").hover(function() {
      //Do anything you need to do here when it is clicked/hovered
      setTimeout(function() {
               //Do all of the other things here
      }, 1500);
});

切换悬停与点击或绑定多个事件，以照顾两个事件类型。要隐藏图像，你可以使用。hide()方法在图像上使用选择器，也可以设置不透明度，如果浏览器支持的话。

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
    $("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
    setTimeout( function(){
        $("img").hide();
    }, 1500);
}).click( function() { //on click, hide the image right away.
    $("img").hide();
});

既然看起来你还没有尝试过，我将给你使用jQuery的最简单的方法(请注意，我还没有测试过这个):

$("#idOfDiv").mouseover(function() {
   setTimeout("alertMsg()",1500);
});
function alertMsg()
{
   alert('Ive been entered for 1500ms')
}

如果你对软件开发是认真的，你应该能够自己想出这个

相关文章：