如何检查悬停在 setTimeout 计时器内的伪元素上的状态？定时器原因错误

Question

我想检查计时器内元素的悬停状态，但是在这一行我收到错误：

if ($(this).nextAll('ul:first').is(':hover'))

这是错误：

Error: Syntax error, unrecognized expression: unsupported pseudo: hover

当我删除 setTimeout 计时器时，错误消失了。

似乎在那个计时器 $(this).nextAll('ul:first') returns 里面是一个空元素。我不知道为什么！！

那个计时器有什么问题以及如何解决它？

使用定时器 - 有错误：

$(".sf-with-ul").hover(function() {
  $(this).nextAll('ul:first').css({
    "display": "block"
  });
  $(this).nextAll('ul:first').removeClass("fadeOutDownSmall");
  $(this).nextAll('ul:first').addClass("fadeInUpSmall");
}, function() {
  setTimeout(function () {
  console.log('Timer End');
  if ($(this).nextAll('ul:first').is(':hover')) {
    console.log('1');
  } else {
    console.log('2');
    $(this).nextAll('ul:first').css({
      "display": "none"
    });
    $(this).nextAll('ul:first').removeClass("fadeInUpSmall");
    $(this).nextAll('ul:first').addClass("fadeOutDownSmall");
  }
}, 1000);
});

.sf-with-ul + ul {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-ps2id-api="true" class="sf-with-ul"><span>Services</span></a>
<ul class="sub-menu animated fast fadeInUpSmall" style="display: block;">
  <li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1281"><a href="https://virtualvisacards.com/active-your-cards/" data-ps2id-api="true"><span>Activate Your Cards</span></a></li>
  <li id="menu-item-1271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1271"><a href="https://virtualvisacards.com/card-balance/" data-ps2id-api="true"><span>Check Cards Balance</span></a></li>
</ul>

没有定时器 - 没有错误：

$(".sf-with-ul").hover(function() {
  $(this).nextAll('ul:first').css({
    "display": "block"
  });
  $(this).nextAll('ul:first').removeClass("fadeOutDownSmall");
  $(this).nextAll('ul:first').addClass("fadeInUpSmall");
}, function() {
  if ($(this).nextAll('ul:first').is(':hover')) {
    console.log('1');
  } else {
    console.log('2');
    $(this).nextAll('ul:first').css({
      "display": "none"
    });
    $(this).nextAll('ul:first').removeClass("fadeInUpSmall");
    $(this).nextAll('ul:first').addClass("fadeOutDownSmall");
  }
});

.sf-with-ul + ul {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-ps2id-api="true" class="sf-with-ul"><span>Services</span></a>
<ul class="sub-menu animated fast fadeInUpSmall" style="display: block;">
  <li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1281"><a href="https://virtualvisacards.com/active-your-cards/" data-ps2id-api="true"><span>Activate Your Cards</span></a></li>
  <li id="menu-item-1271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1271"><a href="https://virtualvisacards.com/card-balance/" data-ps2id-api="true"><span>Check Cards Balance</span></a></li>
</ul>

Answer 1

setTimeout 在寡妇范围内执行是基本概念，因此当您这样做时，this 就是 window。因此，将对元素的引用存储在其外部。

...
function () {
  var elem = $(this)
  window.setTimeout( function () {
    console.log(elem, this)
    var hovered = elem.nextAll('ul:first').is(':hover')
  }), 1000)
}
...

如何检查悬停在 setTimeout 计时器内的伪元素上的状态？定时器原因错误

How can I check status of hover on a pseudo-element inside a setTimeout timer? Timer Couses error

jquery

hover

settimeout