鼠标悬停时显示 div

发布于 2024-11-02 11:50:16 字数 1019 浏览 1 评论 0原文

我有一堆嵌套的 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 中选择选项。

提前致谢。

原文

I've got a bunch of nested divs, ul's etc. Structure is shown here.

<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>

The ul shown here is being shown on a rollover. The .drop css is set as position:absolute so that it appears over the top-level div.

So, the ul drop appears nicely but as soon as it come in contact with the mouse cursor it goes mad (blinds up and down non stop etc)! Now this will have something to do with the mouse over losing focus in some way.

For this sort of effect to work properly how should I go about it? I want to be able to scroll over the div and chose options from the drop ul after it appears.

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瞎闹 2024-11-09 11:50:16

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();
        });
    });
});

http://jsfiddle.net/PDdKL/

Use hover instead:

$(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();
        });
    });
});

回复收藏 0 原文

浅沫记忆 2024-11-09 11:50:16

使用鼠标进入和鼠标离开。

    $('#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();
        });
    });

Use mouseenter and 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();
        });
    });

回复收藏 0 原文