Question

我有一堆嵌套的div，ul等等。这里显示了结构。

<script>
$(document).ready(function() {
    $('#top-level').mouseover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseout( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
</script>

<div id="top-level">
    <div>
        <div class="action" style="display:none;">
            <ul class="drop" style="display:none;">
                <li>Text Here</li>
                <li>Text Here</li>
                <li>Text Here</li>
            </ul>       
        </div>
    </div>
</div>

此处显示的ul显示在翻滚上。 .drop css设置为position：absolute，使其显示在顶级div上。

所以，ul下降显得很好但是一旦它与鼠标光标接触就会发疯（上下都不停止等）！现在，这将与鼠标在某种程度上失去焦点有关。

为了使这种效果正常工作，我应该怎么做呢？我希望能够滚动div并在它出现之后从drop ul中选择选项。

提前致谢。

Answer 1

http://jsfiddle.net/PDdKL/

改为使用悬停：

$(document).ready(function() {
    $('#top-level').hover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    }, function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
});

Answer 2

使用mouseenter和mouseleave。

    $('#top-level').mouseenter( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseleave( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });

Answer 3

您可以在每个事件处理程序的开头使用$(element).stop();来停止该元素的动画。

Answer 4

我为这样的人制作了类似的东西;

http://jsfiddle.net/RyanAdriano/AWm66/8/

鼠标悬停显示div

4 个答案: