Question

我有一个使用jQuery的网页。我的页面看起来像这样：

<div id="page">
  <!-- Stuff here -->
  <div id="content">
    <div class="row">
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
    </div>

    <div class="row">
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>      
    </div>
  </div>
  <!-- Stuff here -->
</div>

<div id="note" style="display:none;">
  <!-- stuff here -->
</div>

var noteTimeout = null;
var note = $('#note');
$(".row")
  .mouseover(function () {
    var col = $(this).find('.col:last');
    var p = col.position();

    note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
    note.show();
          })
  .mouseout(function (e) {
    if (noteTimeout != null) {
      clearTimeout(noteTimeout);
    }
    noteTimeout = setTimeout(function () {
      note.fadeOut(150);
    }, 250);
  })
;

基本上，当用户悬停在一行上时，我试图在该行的最后一列显示一个注释。如果用户移动到另一行，则笔记移动到该行。但是，如果用户的鼠标位于“内容”区域之外，我想在250毫秒后隐藏笔记。最后一项要求给我带来了麻烦。

实际上，如果我更改行，则注释会在250毫秒后消失。但是，如果我删除超时，如果用户将鼠标移到它上面，则音符会闪烁。

Answer 1

您希望将.hover用于元素（在本例中为元素数组），以便在鼠标进入和离开时进行检测。它是.mouseenter()＆amp;的功能扩展。 .mouseleave()。

这样可以使鼠标在元素上方时，它会做一些事情，而不是.mouseover只会触发一个事件。

Navin Rauniyar https://drive.google.com/file/d/0B4Taa_ekRbyAWEJtcTUzaHJSSzg/view?usp=sharing

进一步解释了这一点

使用jQuery检测鼠标是否在元素中

1 个答案: