jQuery Mouse Events with examples - Tutorial

Mouse Events and Examples

Click Event click()


jQuery

$(document).ready(function(){
     $("#IamOne").click(function(){
          $(this).hide();
     });
});

HTML

<button class="btn btn-warning" id="IamOne"><i class="fa fa-hand-pointer-o"></i> Click me to hide</button>
Output

Double Clicks Event dbclick()


jQuery

$(document).ready(function(){
     $("#UamOne").dblclick(function(){
          $(this).hide();
     });
});

HTML

<button class="btn btn-primary" id="UamOne"><i class="fa fa-hand-pointer-o"></i> Double Click on me I will hide</button>
Output

Mouse Enter Event mouseenter()


jQuery

$(document).ready(function(){
     $("#ShowME1").mouseenter(function(){
          this.src="../images/dreamweaver.jpg";
     });
});

HTML

<img src="../images/notepad.png" alt="" id="ShowME1">
Output

Enter your mouse cursor on image

Mouse Leave Event mouseleave()


jQuery

$(document).ready(function(){
     $("#ClearAll").mouseleave(function(){
          $("img.removee").hide();
     });
});

HTML

<img src="../images/bootstrap.png" width="20%" id="ClearAll" class="img-responsive removee">
Output

Mouse Hover and Leave out of from image

Mouse Up Event mouseup()


jQuery

$(document).ready(function(){
     $("#MouseUp").mouseup(function(){
          $("img.MouseUp").hide();
     });
});

HTML

<img src="../images/bootstrap.png" width="30%" class="img-responsive MouseUp">
<button type="button" class="btn btn-danger" id="MouseUp">Click On Me</button>
Output

Mouse Hover Event hover()


jQuery

$(document).ready(function(){      $("#Mousehover").hover(function(){
          $("#PostHtml").html("Hi Welcome to demo");
     },
     function(){
          $("#PostHtml").html("Buy..! See You Later");
     });
});

HTML

<img src="../images/bootstrap.png" width="30%" class="img-responsive MouseUp">
<button type="button" class="btn btn-danger" id="MouseUp">Click On Me</button>
Output

Mouse Focus Event focus()


jQuery

$(document).ready(function(){
     $("input").focus(function(){
          $(this).css("background-color", "#f30000");
          $(this).css("color", "#ffffff");
     });
});

HTML

<input class="form-control form-group" type="text" id="MouseFocus" placeholder="Click On Me">
Output

Mouse Blur Event blur()


jQuery

$(document).ready(function(){
     $("#MouseBlur").blur(function(){
          $("#erMouseBlur").html("<i class='fa fa-close'></i> Please Enter Any Value");
     });
});

HTML

<input class="form-control form-group" type="text" id="MouseFocus" placeholder="Click On Me">
Output

Mouse on Event on()


jQuery

$(document).ready(function(){
     $(".jquery_box").on({
          mouseenter: function(){
               $(this).css("background-color","red");
          },
          mouseleave: function(){
               $(this).css("background-color","blue");
               $(this).css("border-radius","50%");
          },
          click: function(){
               $(this).css("background-color","yellow");
               $(this).css("border-radius","20%");
          }
     });
});

HTML

<input class="form-control form-group" type="text" id="MouseFocus" placeholder="Click On Me">
Output
Post a Comment