根据X / Y位置更改鼠标光标

Question

Is there a simple cross-browser css3 solution to altering the mouse cursor to a clear right/ left graphic according to the mouse position within a div? Or is this a JQuery plugin job?

As in the mouse reaction in the carousel area in this http://themeforest.net/item/flamingo-agency-freelance-portfolio-theme/full_screen_preview/6077145

Answer 1

You can use the :hover selector with the cursor property to do this. Make two fixed, transparent elements for each half of the page to use with :hover, and specify a custom cursor image by assigning cursor a URL. No JS required...

Answer 2

With JS programatically make a div follow the hidden cursor. See example:

<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>