当光标移动到Firefox中的选项时，在<select>上触发mouseleave

html5 • • 问答

我在 jQuery 中的悬停功能显示<select>的隐藏中有 2个<div>。问题是，一旦<div>可见，如果我点击任何一个<select>s 并将光标移动到里面的选项，它们就会折叠这个<div>从而无法与它们交互。这是我只在 Firefox 中遇到的问题。

如果有人能告诉我导致问题的原因，我将不胜感激。

<div>

  <div>

    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3" selected>Option 3</option>
    </select>

    <select>
      <option value="left" selected>Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
    </select>

  </div>

  <div>
    <div>hover here</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".options-container").hide();
  });

  $('#tester-container').hover(mouseEnter, mouseLeave);

  function mouseEnter() {
    $(".options-container").show(200);
  };

  function mouseLeave() {
    $(".options-container").hide(200);
  };
</script>
以上是当光标移动到Firefox中的选项时，在&lt;select&gt;上触发mouseleave的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容