Question

I currently have this bit of code:

$(".usericon").hover(function () {
   if ($(".profile").is(":hidden")) {
   $(".profile").slideDown('slow');
   }
   });

which is currently sliding down the .profile div while hovering over .usericon (but only if it is hidden)

What I’d like it to do is when I hover over .profile nothing happens…but when I hover anywhere else other than .profile, it slides up.

How would I implement this?

Answer 1

for that you will need to stop the mouse event from bubbling when over profile or usericon and close the div when hovering the body.

here is some example code:

$(".usericon").mouseover( function (event) {
    event.stopPropagation();
    if ($(".profile").is(":hidden")) {
        $(".profile").slideDown('slow');
    }
});

$('.profile').mouseover( function (event) {
    event.stopPropagation();
});


$('body').mouseover( function () {
    if ($(".profile").not(":hidden")) {
        $(".profile").slideUp('slow');
    }
});