javascript - 在 Safari 中，下拉选项位于顶部

Question

<div id="growDiv"></div>
<select id="combobox">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>0</option>
</select>

<script>
  $('#growDiv').on('mouseover', function (){
    $(this).css('height', '200px');
  }).on('mouseout', function (){
    $(this).css('height', '75px');
  })
</script>

<style>
    #growDiv {
      width: 300px;
      height: 50px;
      background-color: gold;
      position: absolute;
      z-index: 1000;
    }

    #combobox {
      margin-top: 75px;
    }
</style>

您可以在以下位置看到它: http://jsfiddle.net/dHN2K/

在 Safari 中，如果我展开下拉选项然后将“悬停”在黄色的 div 上，选项会保持在顶部......我该如何解决这个问题？

我也试过 $('select').remove();但它仍然存在!!

谢谢!

Answer 1

您可以在鼠标悬停时隐藏选择。 http://jsfiddle.net/dHN2K/2/

查看我所做的更改。

  $('#growDiv').on('mouseover', function (){
    $(this).css('height', '200px');
      $("#combobox").hide();
  }).on('mouseout', function (){
    $(this).css('height', '75px');
       $("#combobox").show();
  })