javascript - 选择下拉菜单在 jQuery hover() 函数上触发 mouseout

Question

我用 jQuery 在表单中制作了一张幻灯片，但是如果我打开一个选择下拉菜单，表单会滑出或者开始循环进出。

这是我的html：

<div id="hoverForm">
  <div id="label">
  </div>
  <div id="hoverForminner">
    <form>
    <!-- lots of form stuff -->
      <select class="dropdowdn" id="dropdowdn">
        <option selected="selected" value="">- Choose -</option>
        <option value="1">- One -</option>
        <option value="2">- Two -</option>
      </select>
    <!-- more form stuff -->
    </form>
  </div>
</div>

和 JS

jQuery(document).ready(function(){
  $('#hoverForm').hover(
    function(){
      $('#hoverForminner').animate({marginLeft: '0'}, 200);
    },
    function(){
      $('#hoverForminner').animate({marginLeft: '-822px'}, 200);
    }
  );
});

如果我打开选择，如何避免鼠标退出？

Answer 1

您可以通过强制大小hoverForm大于下拉列表及其选项来完全避免该问题。这样，即使用户点击了一个选项，鼠标光标仍然会发现自己在元素上并且不会触发动画。

见http://jsfiddle.net/YNJzF/1/

例如，您可以使用paddingorheight属性：

#hoverForm  {background:green; padding:90px 30px}​

您还可以使用 jQuery 根据选项的数量动态更改高度：

$('#hoverForm').css('height',(originalHeight + $('.dropdowdn option').length*20)+'px')