Question

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

与此http://themeforest.net/item/flamingo-agency-freelance-portfolio-theme/full_screen_preview/6077145

中旋转木马区域的鼠标反应一样

Answer 1

您可以将:hover selector与cursor property一起使用来执行此操作。为页面的每一半制作两个固定的透明元素，用于：悬停，并通过分配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>

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

2 个答案: