select dropdown triggers mouseout on jQuery hover（）function

我用jQuery制作了一个幻灯片，但是如果我打开一个选择下拉菜单，表格会滑出或者开始循环进出。select dropdown triggers mouseout on jQuery hover（）function

这里是我的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); 
    } 
); 
});

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

来源

2012-12-12 Laci K

你想达到什么效果？ – greener

如果鼠标悬停在hoverForm div上，则从左到右滑动，如果鼠标离开，则反之。抱歉，我从animate（）中清除它。 hoverForm固定在左侧：0和顶部：90px，标签div具有背景图像，宽45px，高60px。 –

在这里：http://jsfiddle.net/YNJzF/行为如预期。当用户点击下拉菜单中的一个选项时，鼠标光标会发现自己在hoverForm之外，从而激活动画来关闭它。 – greener

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

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

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

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

您还可以使用jQuery来动态的改变基于期权的数量高度：

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

来源

2012-12-12 21:37:27 greener

我有hoverForm和hoverForminner以及内部溢出的高度：y：scroll; overflow-x：hidden;使其与低分辨率兼容。即使我增加高度，它也会触发鼠标离开。我正在玩：焦点选择器，但与我的版本焦点现在hoverForm将不会关闭，直到你点击到另一个元素，因为它保持焦点，直到比。在悬停回调，我做了这个'if（$（'。dropdowdn'）。（'：focus'））{// do nothing} else {$（'＃hoverForminner'）。animate（{marginLeft：'-822px '}，200）;}' –

select dropdown triggers mouseout on jQuery hover（）function

回答

相关问题