jQuery 将鼠标悬停在隐藏内容上

jQuery hover with hidden content

我有以下代码...

jQuery(function($) {
  var timer;

  $('.action-viewer').hide();
  $('.task').on('mouseover', function() {
    li = $(this);

    timer = setTimeout(function() {
      li.find('.action-viewer').show();
    }, 400);

  }).on('mouseout', function() {
    clearTimeout(timer);
    $(this).find('.action-viewer').hide();
  });
});
body {
  padding: 15px
}
* {
  padding: 0;
  margin: 0;
}
.task-list {
  list-style: none
}
.task {
  padding: 10px;
  border-top: 1px solid #EFEFEF
}
.action-viewer {
  border-top: 1px solid #CCC
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="task-list">
  <li class="task">This is task number 01
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 02
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 03
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 04
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 05
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <ul>

应该发生的是,当您将鼠标悬停在任务上时,将显示操作面板,用户可以单击 link。然而,当我将鼠标移向 link 它消失了。这在没有计时器的情况下工作,但我需要延迟。

有什么建议吗?

您可以使用 mouseleave event rather than the mouseout event.

这样做时,离开元素并悬停在子元素上时不会触发事件。

这是更新后的示例:

jQuery(function($) {
  var timer;
  $('.action-viewer').hide();
  $('.task').on('mouseover', function() {
    var self = this;

    timer = setTimeout(function() {
      $(self).find('.action-viewer').show();
    }, 400);
  }).on('mouseleave', function() {
    clearTimeout(timer);
    $(this).find('.action-viewer').hide();
  });

});
body {
  padding: 15px
}
* {
  padding: 0;
  margin: 0;
}
.task-list {
  list-style: none
}
.task {
  padding: 10px;
  border-top: 1px solid #EFEFEF
}
.action-viewer {
  border-top: 1px solid #CCC
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="task-list">
  <li class="task">This is task number 01
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 02
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 03
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 04
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <li class="task">This is task number 05
    <div class="action-viewer"><a href="#">Action</a>
    </div>
  </li>
  <ul>

mouseenter/mouseleavedelay()使用shorthandhover()方法:

jQuery(function ($) {
    var timer;

    $('.action-viewer').hide();

    $('.task').hover(function () {
        $(this).find('.action-viewer').delay(400).show(0);
    }, function () {
        $(this).find('.action-viewer').stop().hide();
    });

}); 

-jsFiddle-