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();
  })

Answer 2

这适用于 Safari 5.1.7

#growDiv:hover {
    height: 200px;
}

它在旧的 ie 中不起作用，但你可以使用 javascript 方法

Answer 3

出于某种悲伤的原因，这让我感到困扰！这是一个漫长而明确的答案：

#growDiv {
    width: 300px;
    height: 50px;
    background-color: gold;
    position:absolute;
    z-index: 0;
}

#combobox {
    margin-top: 75px;
    z-index:10;
    position:absolute;
}

#growDiv:hover {
    height:200px;
}

http://jsfiddle.net/49b6e/