Question

我正在创建一个拖放图像环境，如果将鼠标悬停在图像上，会弹出一个小菜单。如果单击并拖动图像，则可以对其进行重新排序。

我遇到的问题是，我希望在你拖动时禁用悬停事件。目前，如果您拖动图像，它会触发您悬停在其他图像上的所有悬停菜单。

$('ul.imglist li').mousedown(
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });

// Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });

我在这里有一些jQuery，底部悬停事件是我想要在拖动时禁用的事件，顶部mousedown是当你点击图像时摆脱菜单。我需要一些能够在移动鼠标的同时禁用悬停的东西，同时按下按键（拖动）。

我尝试了一些没有运气的事情，是否有人有建议？

Answer 1

.hover-off {
  pointer-events: none;
}

......救援：Paul Lewis + thecssninja.com带着非常好的一站式解决方案。

http://www.thecssninja.com/css/pointer-events-60fps

Answer 2

有数百种方法。

    // Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });

应该是在mouseup事件上... 然后在mousedown甚至你可以取消悬停事件。顺便说一下查找绑定和取消绑定

但为什么不使用可拖动的ui？并节省一些时间的最终努力

jQuery - 拖动时停止悬停事件

2 个答案: