jquery - 具有悬停功能的 if-else 条件？

Question

我可以使用悬停功能设置 if-else 条件吗？我想在将鼠标悬停时加载文本链接旁边的页面，并且希望能够将鼠标悬停/鼠标悬停在加载的内容上。但这个加载的内容在两种情况下会被删除:

1. when the mouse leave the loaded content
2. when the mouse leave the box that holds the text link

但是我遇到了第 2 种情况的问题 - 如果我在第 2 种情况上应用悬停功能，则第 1 种情况就不会发生。当我的鼠标离开文本链接框时，加载的内容立即被删除。

因此，我正在考虑如果可能的话将 else-if 条件添加到悬停函数中(或者如果您有任何其他更好的想法？)，我只想在情况编号未发生时删除加载的内容。如果我将鼠标悬停在加载的内容上，则不要应用情况 2，直到我的鼠标离开加载的内容区域。

下面是 jQuery(针对情况 1):

$(document).ready(function() {
    $(".button").hover(function(e){

        $('.wrapper-item-content').remove();

            var parent = $(this).parent();
            $(this).parent().addClass('current');


        var parent_top = parent.offset().top-180;
        var parent_left = parent.offset().left+80;

        $("body").append('<div class="wrapper-item-content"></div>');

        $(".wrapper-item-content").css({
            top: parent_top,
            left: parent_left,
            position: 'absolute',
            zIndex: '100',
            width: '350px',
            height: '100%',
            overflow: 'visible',
            border: '1px solid #000'
        });

        var path_url = $(this).attr('href');
        var path_file = $(this).attr('rel');
        var item_wrapper = $('.wrapper-item-content');

        var array_url = path_url.split('/');
        var pg_url = $(array_url).last()[0];

        item_wrapper.load(path_file+'?url='+pg_url, function(){

            item_wrapper.hover(function() {
                item_wrapper.addClass('mouseenter');
            },function(){
                item_wrapper.removeClass('mouseenter');
                parent.removeClass('current');
                item_wrapper.remove();
            });    

            parent.hover(function() {
                //something
            },function(){

                if(item_wrapper.hasClass('mouseenter'))
                {
                    //alert('has mouseenter');
                }
                else
                {
                    //alert('has no mouseenter');
                    //parent.removeClass('current');
                    //item_wrapper.remove();
                }
            });

        });

    },
    function(){

    });    
});

HTML:

<div class="box"><a href="#" class="button" rel="content.php">Hover me</a></div>

Answer 1

hover() 事件可以采用另一个函数，当鼠标离开时调用该函数。

$(".button").hover(
    function(e){ }, // over
    function(e){ }  // out
);

http://api.jquery.com/hover/

hover(handlerIn(eventObject), handlerOut(eventObject))