Search code examples
jquerymouseovermouseout

Add MouseOut in jQuery Code

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!

Solution

  • 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();
    });
});​