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

这似乎是一个火狐虫。

我找到了方法。这很简单。只需使用visibility: hidden代替display: none即可。假设使用flicker.addClass('hidden')而不是flicker.hide()或类似的东西。

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

The css example.

css方法在firefox，chrome，safari，opera中运行良好。但请注意display: none和visibility: hidden之间的difference。

firefox

1 个答案: