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/

例如，您可以使用padding或height属性：

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

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

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

select下拉触发器在jQuery hover（）函数上触发mouseout

1 个答案: