Add MouseOut in jQuery Code

Question

I'm trying to make a div jQuery code to show a div after mouse over on another div!

jQuery:

$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

    $("div.rank").hide();
});​

HTML:

<div class="pic">Mouse Over</div>
<div class="rank">Show Somthing</div>​

Demo: http://jsfiddle.net/CaMwL/

Now, problem is, i need to add mouseout event to this code, i want to make a div hide when i move the mouse out! and i dont know how i can do that!

Answer 1

Try this: http://jsfiddle.net/633hD/1/

You can chain the API: .mouseout http://api.jquery.com/mouseout/

Hope it fits the cause :)

code

$(document).ready(function() {
    $("div.rank").hide();

    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    }).mouseout(function() {
           $("div.rank").hide();
    });
});​

Answer 2

do you mean:

$(document).ready(function() {
    $('.pic').hover(
        function() {
            $('.rank').fadeOut(200);        
            $(this).next('.rank').fadeIn(400);   
        },
        function() {
            $('.rank').fadeIn(400);        
            $(this).next('.rank').fadeOut(200);   
        });

    $("div.rank").hide();
});

Answer 3

try this

$('.pic').mouseout(function() {
    $("div.rank").hide();
});

find jsfiddle http://jsfiddle.net/CaMwL/5/

Answer 4

$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

     $('.pic').mouseout(function() {

         $("div.rank").hide();   
    });


});

Answer 5

Just add

$(document).ready(function() {
$('.pic').mouseout(function() {
    $("div.rank").hide();
});   
});

Also, you could add onmouseover and onmouseout attributes to the div element, and set the value to a javascript function with jquery.