Need help in jquery hover function

Question

I have a span in my page once. I have used hover function to display a pop-up on mouse hover and hide that pop-up automatically once the mouse is moved away. My code is below and it works fine.

What i need is if i click on the span the pop-up should freeze and only if i close the pop-up it must close. But the hover should also work. I need both hover and click function to be worked simultaneously..

My code for hover:

$('td#' + parentElement).find('span.likes').hover(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
}, function () {
    $('div#pop-up').hide();
});

My code for click:

$('#' + parentElement).find('span.likes').click(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
    e.stopPropagation();
})

How to integrate both???

Blender · Accepted Answer · 2012-10-08 06:22:12Z

1

You can use .on() to bind multiple events:

$('#' + parentElement).find('span.likes').on('mouseenter click', function(e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;

    if (leftPos < 0) {
        leftPos = 10;
    }

    GetLikesList(json_row.value.task_id);

    $('div#pop-up').show().css({
        top: topPos,
        left: leftPos
    }).appendTo('body');

    $('#mopopuptitle').html('People who liked this Request');
}).on('mouseleave', function () {
    $('div#pop-up').hide();
});

Although I don't see much use in binding both unless you want to run the handler twice. To click on the element, the mouse has to hover over it.

answered Oct 8, 2012 at 6:22

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xavier Over a year ago

Actually what i need is on mouse over the pop-up should be displayed and once i click that the same pop up should be freezed.. It should not be hidden.. If i haven't clicked it sholud hide on mouse leave.. How could i achieve??

Collectives™ on Stack Overflow

Need help in jquery hover function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related