Help needed with showing and hiding a div

I'm having a problem with an image viewer I'm creating. Like the image below, the 'window' is where the image is shown and 'paging' is where the user can change the image. I've used this Jquery script to make the 'paging' fade in whenever the window is hovered over - It's hidden to start with. Although when the user hovers onto 'paging', it flickers. (Like shows then hides, etc.)

I suppose it's because the mouse isn't hovering over the 'window' anymore. Can anyone suggest how I can make 'paging' remain showing? Thanks fo开发者_Go百科r the help! :)

$(".window").hover(function() {
    $(".paging").fadeIn('fast');
}, function() {
    $(".paging").fadeOut('fast');
});

---

You can use .stop() here and include both in your .hover() selector, like this:

$(".window, .paging").hover(function() {
    $(".paging").stop(true, true).fadeIn('fast');
}, function() {
    $(".paging").stop(true, true).fadeOut('fast');
});

This way, when you leave to enter the child or back to the parent it stops the fade out and brings it right back, resulting in no visible action to the user.

---

You could try using mouseover and mouseout instead. I'm not sure that mouseout would react the same way hover does.

---

In fact, when you pass your mouse over the paging there is a magical thing that happens which is called "event bubbling": the "hover" event is passed to the container which is the parent of the "hovered" object, and so on until the "document" object.

So to solve your problem, you need to stop bubling, you can do it with "return false":

$(".paging").hover(function() {
    return false;
}, function() {
    return false;
});

(It's possible that in recent version of jquery you can replace the argument function(){return false;} by just false.)