javascript - Firefox 上错误的 mouseenter 事件

Question

我在 div 元素中有一个输入。输入在默认情况下是隐藏的，当鼠标悬停在容器上时应该是可见的。在任何 keydown 事件中，输入应该被隐藏。显然，用户必须单击输入字段才能输入文本。

这是我的 plnkr

 var container = $('#container');
 var flicker = $('#flicker').hide();
  var log = $('#log');
  container.on('mouseenter', function() {
    flicker.show();
    log.prepend('<div>mouseenter</div>');
  });
  flicker.on('keydown', function() {
    flicker.hide();
    setTimeout(function() {
      flicker.show();
    }, 4000);
  })

它在 Chrome 上运行完美，但在 Firefox (OS x) 上运行失败。在 Firefox 上，输入字段不会消失，而且效果不理想。

有什么建议吗？

Answer 1

这似乎是 firefox 的一个错误。

我想出了办法。这很简单。只需使用 visibility: hidden 而不是 display: none。假设使用 flicker.addClass('hidden') 而不是 flicker.hide() 或类似的东西。

另一种方法是在 flicker.hide() 之后关闭 mouseenter 事件，并在 150 毫秒后再次启用。但是因为setTimeout，看起来有点难看。

The css example.

CSS 方法在 Firefox、Chrome、Safari、Opera 中运行良好。但要注意 difference在 display: none 和 visibility: hidden 之间。