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/

在Safari中，下拉选项保持最佳状态

3 个答案: