jQuery Events Part - II : Mouse Events - Continue....

jQuery mouse evemts

.hover()
hover mouse event triggers to the element when user take mouse over the perticular element.

Example of hover mouse event:

<div> id="hoverDiv">Change Color </div>
$(document).ready(function() 
{  
$("hoverDiv").hover( 
function () { 
$(this).css("backgroundcolor", 'blue'); 
} 
);
});



.mousedown()
mousedown() mouse event triggers when user clicks on the the perticular element.

Example of mousedown event:

    <div> id="hoverDiv">Change Color</div>
    $(document).ready(function() 
    {  
    $("hoverDiv").mousedown( 
    function () {
    alert('Mouse Down event fired for div')
    } 
    );
    });
    


.mouseenter()
mouseenter() mouse event triggers when user enter to the area of perticular element. This is different from .hover in the way the event bubbling happens. If we have element inside element and mouse enters to inside element the mouseenter event will not fire for ouside element. But in case of .mouseover() mouse event it will fire for both inner and outter element. For more info: http://api.jquery.com/mouseenter/

Example that shows mouse enter event

    <div> class="out enter">
        <p>move your mouse</p>
        <p>0</p>
    </div>
    var i = 0;
    $("div.enter").mouseenter(function(){
    $("p:first",this).text("mouse enter");
    $("p:last",this).text(++i);
    }); 
    


.mouseleave()
mouseleave() mouse event triggers when user leaves the area of perticular element. This is different from .hover in the way the event bubbling happens. If we have element inside element and mouse leaves from inside element the mouseleave event will not fire for ouside element. But in case of .mouseout() mouse event it will fire for both inner and outter element. For more info: http://api.jquery.com/mouseenter/

Example that shows mouse leave event

    <div> class="out leave">
        <p>move your mouse</p>
        <p>0</p>
    </div>

    var i = 0;
    $("div.leave").mouseleave(function(){
    $("p:first",this).text("mouse leave");
    $("p:last",this).text(++i);
    }); 
    

0 Comments :

Post a Comment