Stylish Cursor with jQuery: Replace Old Cursor

0

I love playing tricks with the things. This time I have played with the cursor. I have replaced the old default arrow cursor with a new one. CSS plays an important role in this. And of course, jQuery is in the lead role. Stylish cursor can be used in different contexts depending on your needs. So lets watch it working.





Live Demo Download Script

jQuery Code

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $('#Cursor').css({cursor: 'crosshair'});
 
 // Position the Cursor.
 var positionCursor = function(event)
 {
  /* Get cursor positions */
  var tPosX = event.pageX-22;
  var tPosY = event.pageY-22;

  /* Set Cursor positions */
  $('div#Cursor').css({top: tPosY, left: tPosX});
 };

 // Show (create) the Cursor.
 var showCursor = function(event)
 {
  if($.browser.mozilla)
  {
   $('#Cursor').show();
  }
  else
  {
   var s = document.createStyleSheet();
   s.addRule("*", "cursor: inherit");
   s.addRule("body", "cursor: crosshair");
   s.addRule("html", "cursor: crosshair");
  }
  $('#Cursor').show();
  positionCursor(event);
 };
 
 // Hide (remove) the Cursor.
 var hideCursor = function()
 {
  $('div#Cursor').hide();
 };
 
 $('div#main').hover(showCursor, hideCursor).mousemove(positionCursor);
});

HTML Code

<body>
<div id="main">
 <div id="Cursor"></div>
</div>
</body>

CSS Code

body{
cursor:crosshair;!important;
}
#main{
height:500px;
width:700px;
border:2px solid #d5d5d5;
margin:auto;
cursor:none;!important;
}
#Cursor {
display:none;
background-image:url(curs.gif);
background-repeat:no-repeat;
position: absolute;!important;
height:50px;
width:50px;
z-index: 2;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/