Click event in jQuery

jQuery mouse click event
In web application we need capture mouse click event in jQuery. To perform some clientside operations in asp.net we can easly capture mouse click event in jQuery.

jQuery mouse click event happens when we click mouse button on some spicific element on page. We can use click event to show some information box, or we can show hide div on click event of mouse...etc
Here we will look at very simple exaple of how to show hide div when we click on link

Sample code for click event in jQuery [ASP.NET]


<html>
<head><title></title>
  <script src="jquery-1.4.1.js" ></script>
  <script src="jquery-1.4.1.min.js" ></script>
    
 <style type="text/css"> 
  .info {
   position: absolute;
   z-index: 200;
   display: none;
   text-align: center;
   background: gray;
   border: 2px solid silver;
 }
</style>
 <script type="text/javascript"> 
//<![CDATA[
  $(document).ready(function(){
   $("a").click(function(){
   $(".info").show();
  });
//]]>
</script>
</head>
<body>
 <form>
 <p>
   Click on this link <a id="aspnet" href="#" >jQuery mouse clickr</a>.
 </p>
 <div class="info">
   You will see some infomation when you <b>mouse click</b> on link. 
 </div>
</form>
</body>
</html>

Mouseover event in jQuery

mouseover jquery
In web application often we need mouseover in jquery. jQuery mouseover event triggers when we take mouse over perticular DOM element on page.

We can use mouseover to show custom tooltip on link or to show mouseover context menu...etc.jQuery provides lot's of mouse event's in order to deal with clientside operation in asp.net.
Here we will look at very simple exaple of how to show hide div when we mouseover on link.

Sample to show how mouseover in jQuery works [ASP.NET]


<html>
<head><title></title>
    <script src="jquery-1.4.1.js" ></script>
    <script src="jquery-1.4.1.min.js" ></script>
    
    <style type="text/css"> 
 .info {
  position: absolute;
  z-index: 200;
  display: none;
         text-align: center;
  background: #fff;
     border: 1px solid silver;
 }
</style>
 <script type="text/javascript"> 
//<![CDATA[
        $(document).ready(function(){
            $("a").mouseover(function(){
                $(".info").show();
           });

           $("a").mouseout(function () {
               $(".info").hide();
           });
        });
//]]>
</script>
</head>
<body>
    <form>
<p>
Mouseover on this link <a id="aspnet" href="#" >jQuery mouseover</a>.
    </p>
<div class="info">
You will see some infomation when you <b>mouseover</b> on link.
And infomation will hide when you <b>mouseout</b> from link.
     </div>
</form>
</body>
</html>