Question

我想：

on ul＆＃39; hover on＆＃39;将div#object1添加到正文中。
关于＆＃39;将鼠标悬停在＆＃39;删除div#object1。
重复

问题在于，虽然可以将div#object1添加到＆＃39;悬停在＆＃39;它不止一次这样做。

因此我的问题是如何在每次通话时只添加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。

另一方面，mouseenter仅在您的鼠标进入#menu时触发，而在您从其子女悬停时不会触发。

$('#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>

jQuery如何在每次调用时只为div添加一次？

1 个答案: