1

在我的代码中，将鼠标悬停在图像上会在该图像顶部创建一个带有“.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();       
  }
});
4

1 回答 1

2

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

  • 为您的图像添加一个包装器并将您的 pin 按钮插入其中并将其设置为不可见
  • 当您悬停包装器时显示按钮
  • 当你离开包装隐藏按钮

代码：

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

于 2013-10-18T16:58:02.043 回答