Previous chapter (Jquery Tutorial - Manipulation)Next chapter (Jquery Tutorial - Effects)

jQuery Mouse Event

jQuery mouse events are events that have to do with actions of the mouse. These can be a click, double-click, mouse down and more. Mouse events can be used in two different ways.

Other examples in Events (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
  <br/>
  <br/>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
  </script>
  
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){
        $("h5 span").text(e.pageX + ", " + e.pageY);
      });
      
      
      $("h4").mouseenter(function(){
        $("h4").css("background-color","yellow");
      });
      $("h4").mouseleave(function(){
        $("h4").css("background-color","#E9E9E4");
      });
      
      $(".clickme").mouseup(function(){
         $("h3").slideToggle();
      });
    });
  </script>
  <body>
    <h5>
      Mouse is at coordinates:       
      <span>
        Move your cursor here to start!      
      </span>
    </h5>
    <h4>
      Try to move your mouse pointer over me! We dare you!
    </h4>
    
    <h3>
      You can slide me away by clicking the link below
    </h3>
    <div class="clickme">
      <b style="color:red">
        click me to toggle the header
      </b>
    </div>
  </body>
</html>

^1.0

^1.0

^1.0

^3.0

^4.0

jQuery Mouse Event

Useful Information