jQuery- 从悬停中排除

Question

在我的代码中，将鼠标悬停在图像上会创建一个新链接，该链接顶部有一个".pin_it"类。如果用户将鼠标移离图像，则.pin_it应隐藏。但是，如果他们将鼠标移到新.pin_it上，它应该保持可见。

我已经把这一切都搞定了。问题是，在它们将鼠标悬停在.pin_it上后，移动到图像之外应该隐藏.pin_it，但事实并非如此。然后，如果您将鼠标悬停回去，它将添加另一个.pin_it，但将不再尊重鼠标退出行为。

我做错了什么？

JS小提琴-> http://jsfiddle.net/kthornbloom/rKZK5/2/

法典：

$('img').hover(
function() {
  var imgWidth = $(this).width();
  var imgPosition = $(this).offset();
  if(imgWidth > 300) {
      $('body').append('<a href="#" class="pin_it">Pin It</a>');
      $('.pin_it').css(imgPosition);
  }
  else {
      // Do Nothing
  }
}, function() {
  var isHovered = $('.pin_it').is(":hover");
  if (isHovered == true) {
      //Do nothing
  } else {
    $('.pin_it').remove();       
  }
});

Answer 1

您可以通过以下方式重新考虑标记：

• 为图像添加包装器，并在其中插入图钉按钮并将其设置为不可见
• 当您将鼠标悬停在包装器上时，显示按钮
• 当您离开包装器时，隐藏按钮

法典：

$('#imgWrapper').hover(
function () {
    var imgWidth = $(this).width();
    var imgPosition = $(this).offset();
    if (imgWidth > 300) {
        $('.pin_it').css(imgPosition).show();
    } else {
        //
    }
}, function () {
    $('.pin_it').hide();
});

添加/删除元素的繁重 DOM 操作不会有任何问题，代码看起来很简单。

演示：http://jsfiddle.net/IrvinDominin/fzM7k/