javascript - 悬停 2 秒淡入/淡出 sibling 不工作

Question

我设法在 ID 或类上悬停 2 秒以淡入/淡出(这显然捕获了所有具有相同类的内容)，但我无法在 (this).sibling("className ")

此外，即使没有 if 语句，fadeIn/Out 或 toggleFade 也能正常工作...在创建同级元素 fadeIn 之前，我已经没有办法让鼠标悬停超过 2 秒

var timeoutId;
$(".cell-inner").hover(function() {
  if (!timeoutId) {
    timeoutId = window.setTimeout(function() {
      timeoutId = null; // EDIT: added this line
      $(this).siblings(".tool-tip").fadeIn();
    }, 2000);
  }
});

function() {
  if (timeoutId) {
    window.clearTimeout(timeoutId);
    timeoutId = null;
  } else {
    $(this).siblings(".tool-tip").fadeOut();
  }
});

.tool-tip {
  display: none;
}

.tool-tip:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>

Answer 1

首先，您的代码段已损坏，因为您在 block 的末尾放置了一个未分配的匿名函数。我认为这是 hover() 调用的第二个参数。

您的逻辑的另一个问题是因为 setTimeout() 处理函数在与 mouseenter 处理函数不同的范围内运行，因此 this 在您的代码中未引用引发事件的元素。

要解决此问题，请在事件处理程序中创建一个变量，该变量包含您可以在超时内使用的元素引用。请注意，您还可以简化 setTimeout() 和 clearTimeout() 调用，如下所示:

var timeoutId;

$(".cell-inner").hover(function() {
  var $el = $(this);
  timeoutId = setTimeout(function() {
    $el.siblings(".tool-tip").fadeIn();
  }, 2000);
}, function() {
  clearTimeout(timeoutId);
  $(this).siblings(".tool-tip").fadeOut();
});

.tool-tip {
  display: none;
}

.tool-tip:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>

您还应该注意，您尝试做的事情仅在 CSS 中是可能的。在可能的情况下，这种方法比使用 JS 更好。

.tool-tip {
  position: absolute;
  opacity: 0;
  transition: opacity 300ms;
  transition-delay: 2s;
}
.cell-inner:hover + .tool-tip {
  opacity: 1;
}


.tool-tip:hover {
  cursor: pointer;
}

<div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>