Kli-WebApp - Custom Cursor with HTML/JS/CSS

kli - webapp - html css js - custom cursor.html

<!--
// From Klihelp: 
// https://gist.github.com/klihelp/67798dfc1266c3684326
// 
// The idea is that
// - we hide the real cursor
// - and #custom_cursor div will follow the cursor, inside this div can have any text or image
-->


<div class="main_area">
...
...
...
</div>

<!--
// The html:
-->
<div id="custom_cursor">HELLO</div>

<!-- 
// The script uses jQuery
-->
<script type="text/javascript">
     $(document).ready(function(){
          var $area = $('.main_area').css({
                     'cursor':'none'
               }),
          $myCursor = $('.custom_cursor').css({
                     'position': 'fixed',
                     'z-index': '999'
               })

          if ($myCursor.lenght){
           $area
               .on('mouseout.customCursor', function(){
                     $myCursor.hide()
               })
               .on('mousemove.customCursor', function(event){
                     $myCursor.show().css({
                       'left': event.clientX - 20,
                       'top': event.clientY + 7
                     })
               })
          }
     })
</script>