Question

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

when the mouse leave the loaded content
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））

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

1 个答案: