Question

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

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

我做错了什么？

JS小提琴 - ＆gt; 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/

jQuery-从鼠标悬停中排除

1 个答案: