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

Question

有没有一种简单的跨浏览器css3解决方案，可以根据鼠标在div中的位置将鼠标光标更改为清晰的右/左图形？或者这是一个JQuery插件工作？

与此http://themeforest.net/item/flamingo-agency-freelance-portfolio-theme/full_screen_preview/6077145中旋转木马区域中的鼠标反应相同

Answer 1

您可以在cursor property中使用:hover selector来完成此操作。为页面的每一半制作两个固定的、透明的元素，用于:hover，并通过为cursor分配一个URL来指定自定义光标图像。不需要JS ...

Answer 2

使用JS以编程方式创建一个跟随隐藏光标的div。请参见示例：

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