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

回答

相關問題