CODEWITHSUNDEEP
jquerymouseovermouseout
Ali
Ali

Reputation: 1058

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!

Upvotes: 2

Views: 364

Answers (5)

NinJoel
NinJoel

Reputation: 29

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.

Upvotes: 1

coolguy
coolguy

Reputation: 7954

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

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

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


});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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

Upvotes: 2

Tats_innit
Tats_innit

Reputation: 34107

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

Upvotes: 2

YogeshWaran
YogeshWaran

Reputation: 2281

try this

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

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

Upvotes: 1

Related Questions