Question

我设法悬停了2秒钟，以在ID或类上淡入/淡出（显然，所有类都属于同一类），但是我无法在（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

首先，您的代码段已损坏，因为您在该代码块的末尾放置了一个未分配的匿名函数。我想这是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>

悬停2秒钟，淡入/淡出兄弟姐妹不起作用

1 个答案: