jQuery如何每次呼叫一次仅预定div

Question

我想要：

1. 在ul'hover上'to'将 div#object1置于身体上。
2. 在"悬停"上删除该div#object1。
3. 重复

问题是，尽管可以在"悬停"上预处div#object1，但它可以不止一次。

因此，我的问题如何每次呼叫一次 div#object1？

我还尝试了one()尝试了一下，但是第二次悬停，div#object1没有预先预先审核。换句话说，one()在第二个通话中不起作用。

这是我的代码（jsfiddle）：

$(document).ready(function() {
  $('ul#menu').one('mouseover', function() {
    $('body').prepend('<div id="object1"></div>');
  });
  $('#menu li a#omnie').mouseover(function() {
    $('div#object1').stop().animate({
      right: 530,
      top: 8,
      opacity: 1
    }, 100);
  });
  $('#menu li a#oferta').mouseover(function() {
    $('div#object1').stop().animate({
      right: 445,
      top: 8,
      opacity: 1
    }, 100);
  });
  $('#menu').mouseleave(function() {
    $('div#object1').fadeOut(300, function() {
      $(this).remove();
    });
  });
});

Answer 1

使用 .one不会帮助您，它的作用会自动在一个呼叫后解脱处理程序，即使您在稍后的某个点上徘徊在它上都不会再次调用。

您应该使用的是.on('mouseenter')而不是.on('mouseover')。

每次您的鼠标从外部或从其子项目之一进入#menu列表时，mouseover都会触发。

另一方面，只有在鼠标进入#menu并且在您偏离子女时不会触发时，mouseenter才会触发。

。

$('#parent').on("mouseover mouseenter", function(e) {
  $('#' + e.type).text(
    parseInt($('#' + e.type).text()) + 1
  );
});

#parent {
  background: teal;
  height: 150px;
  width: 300px;
  color: white;
}
#child {
  background: orange;
  height: 50%;
  width: 50%;
  color: black;
}
#event {
  padding: 10px;
  width: 280px;
  text-align: center
}
#parent,#child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="event">
  Mouseover: <span id="mouseover">0</span> Mouseenter: <span id="mouseenter">0</span>
</div>
<div id="parent">
  <h3>Parent</h3>
  <div id="child">
    <h3>Child</h3>
  </div>
</div>