jQuery悬停隐藏在子元素上

Posted 2023-05-08

【中文标题】jQuery悬停隐藏在子元素上

【英文标题】：jquery hover hides on child element

【发布时间】：2011-11-29 05:44:32

【问题描述】：

现场示例：http://jsbin.com/axaqoc/2

当我尝试选择子选择框时，下拉菜单隐藏起来，认为鼠标离开了父元素。

js代码：（完整代码：http://pastie.org/2624436）

$('.dropOption').hover(function(e) 
        e.stopPropagation();
        $(this).trigger('dropOption', 'show'); // show the parent element
        return false;
    ,function(e) 
        e.stopPropagation();
        $(this).trigger('dropOption', 'hide'); // hide the parent on mouse out
        return false;
    );

如何停止选择下拉菜单上的冒泡？ （顺便说一句，这在 chrome 上可以正常工作，但在任何其他浏览器上都不能。）

html代码：

<ul><li id="repeat" class="dropOption active"><a href="#" class="dropLink active tips" data-tips-position="right center"><span class="icon repeat">Repeat Off</span></a>
                        <ul class="repeatOptions active">
                            <li><label>Repeat Each</label> <select class="repeatEach" name="repeatEach"><option value="ayah">Ayah</option><option value="page">Page</option><option value="surah">Surah</option><option value="Juz">Juz</option></select></li>
                            <li><label>Repeat Times</label> <select class="repeatTimes" name="repeatTimes"><option value="1">x1</option><option value="2">x2</option><option value="3">x3</option><option value="4">x4</option><option value="5">x5</option><option value="6">x6</option><option value="7">x7</option><option value="8">x8</option><option value="9">x9</option><option value="0">&infin;</option></select></li>
                            <li><label>Delay</label> <select class="repeatDelay" name="repeatDelay"><option value="0">0 sec</option><option value="1">1 sec</option><option value="2">2 sec</option><option value="3">3 sec</option><option value="4">4 sec</option><option value="5">5 sec</option><option value="5">5 sec</option><option value="6">6 sec</option><option value="7">7 sec</option><option value="8">8 sec</option><option value="9">9 sec</option><option value="ayah">Ayah Duration</option></select></li>
                        </ul>
                    </li>
                </ul>

【问题讨论】：

谢谢大家..我已经找到了解决方案，我在底部发布了..

【参考方案1】：

e.relatedTarget = null 如果鼠标在选择框上

    $('.dropOption').hover(function(e) 
            $(this).trigger('dropOption', 'show');
        ,function(e) 
            if (e.relatedTarget != null) // drop down select box fix
                $(this).trigger('dropOption', 'hide');
        );