Question

Can I set if-else condition with hover function? I want to load a page next to the text link when I hover it and I want to be able to hover/ mouseover on the loaded content. But this loaded content will be removed under two situations:

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

but I have the problem with the situation number 2 – if I apply the hover function on number-2, the number 1 just won’t happen. The loaded content is removed immediately when my mouse leave the text link box.

So, I am thinking to put else-if condition to the hover function if possible (or any other better ideas if you have any?) I want to remove the loaded content only if the situation number does not occur. If I have moused over on the loaded content, then don’t apply situation number 2, until my mouse leave the loaded content area.

Below is the jQuery (for the situation number 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(){

    });    
});

The html:

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

Answer 1

the hover() event can take another function which is called when the mouse leaves.

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

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

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