1

我创建了一个用于在鼠标悬停时显示 div 的脚本。

<script type="text/javascript">
            $(document).ready(function() {

                $("a.prikaziDiv").hover(

                function() {
                    var $sibling = $(this).siblings('div.prikazano').show(); // get the sibling div and show it
                    $('div.prikazano').not($sibling).hide(); // hide the other divs
                }, function() {
                    $(this).siblings('div.prikazano').delay(999).fadeOut(0);; // get the sibling div and hide it after .333 seconds
                });

            });

</script>

<a class="prikaziDiv" href="#">SHOW</a><div class="prikazano" style="display:none;">aa</div>

它可以工作，但是当我将鼠标悬停在“SHOW”链接上时，我将光标放在该 div 上，但它消失了。我不想让 div 消失。

有人能帮我吗？

谢谢！

4

2 回答 2

1

您悬停锚点，出现 div，当您悬停 div 时，它消失了，因为您不再悬停在锚点上，因此 hover() 的 mouseleave 部分触发。您可以将 div 放在锚点内，也可以使用超时，例如：

$(document).ready(function () {
    var timer;
    $("a.prikaziDiv").on({
        mouseenter: function() {
            var $sibling = $(this).siblings('div.prikazano').show();
            $('div.prikazano').not($sibling).hide();
        },
        mouseleave: function() {
            var self = this;
            timer = setTimeout(function() {
                $(self).siblings('div.prikazano').fadeOut(1);
            }, 999);
        }
    });

    $('div.prikazano').on({
        mouseenter: function() {
            clearTimeout(timer);
        },
        mouseleave: function() {
            $(this).delay(999).fadeOut(1);
        }
    })
});

小提琴

于 2013-02-06T23:30:20.933 回答
0

使用 moueenter 而不是悬停。

http://jsfiddle.net/kkobold/y8hb9/

于 2013-02-06T19:06:08.947 回答