html 中的自定义光标

Question

我想在 div 内添加一个图像作为我的光标，但我希望它隐藏并有一个正常的指针光标，当鼠标悬停在其中的任何 link 上时div.
我写道：

var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
  $myCursor.hide();
})
$box.mousemove(function(e){
  $myCursor.css('top',e.pageY);
  $myCursor.css('left',e.pageX);
  if (!button1.is(":hover") && (!button2.is(":hover"))){
    $myCursor.show();
  }
  else if(button1.is(":hover") || (button2).is(":hover")){
    $myCursor.hide();
  }
  if(e.clientX<$box.width()*0.5){
        $myCursor.css('transition','transform 1s');
        $myCursor.css('transform','rotate(-270deg)');
        }
        else if(e.clientX>$box.width()*0.5){
        $myCursor.css('transition','transform 1s');
        $myCursor.css('transform','none');
        }

});

.box{
  height:100vh;
  background:#ccc;
  padding-top:50px;
  cursor:none;
  
}
button{
  display:block;
  margin:15px auto;
  width:20%;
  padding:10px;
  cursor:pointer;
}
#myCursor{
  position:absolute;
  height:50px;
  width:50px;
  top:0;
  left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
  <button id = "link1">Some link</button>
  <button id = "link2">Another Link</button>
  <img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>

我该如何正确实施？谢谢

Answer 1

你可以使用CSS解决这个问题，不需要javascript。看看这里： http://www.w3schools.com/cssref/pr_class_cursor.asp

您可以在 javascript 的帮助下设置 CSS 类以启用对其他元素的某种依赖性。

Answer 2

仅使用 CSS 更容易实现。您必须事先调整光标图像的大小，在此示例中，我将一个调整为 50x50 像素（白色框中的另一个为 64x64）。

, auto 是强制性的并且定义了后备。

.box{
  height:100vh;
  background:#ccc;
  padding-top:50px;
  cursor: url(//codestylers.de/rifle.png), auto;
}
button{
  display:block;
  margin:15px auto;
  width:20%;
  padding:10px;
  cursor: pointer;
}

.another-cursor {
  background-color: white;
  width: 300px;
  height: 200px;
  cursor: url(//codestylers.de/cursor.png), auto;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
  <button id = "link1">Some link</button>
  <button id = "link2">Another Link</button>
  <div class="another-cursor"></div>
</div>

Answer 3

简单的解决方案就是调整选择器的范围：

var $box = $(".box:not(button)"); 因此只要光标不在按钮上，就会调用图像开关。但是，在您的情况下，您应该考虑减小图像大小，使其更接近鼠标大小 - 因为在鼠标指针本身覆盖按钮之前图像和按钮有很大的重叠。

一个更复杂的解决方案将涉及使用数组来注册按钮坐标和尺寸，然后使用 mousemove 和 each 根据存储的按钮尺寸不断检查图像坐标宽度，但这取决于什么否则你继续进行可能会影响性能。

如果您将 pointer-events: none 添加到 #myCursor css，您可以防止光标偶尔被图像本身从按钮上遮挡 - 因此性能更好。

var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
 mouseleave:function(){
       $myCursor.hide();
 },
    mousemove: function(e){
   $myCursor.css({ 'left':e.pageX, 'top':e.pageY });
   if (!button1.is(":hover") && !button2.is(":hover")){
     $myCursor.show();
   } else if(button1.is(":hover") || (button2).is(":hover")){
     $myCursor.hide();
   }
   }
});

.box{
  height:100vh;
  background:#ccc;
  padding-top:50px;
  cursor:none;
  
}
button{
  display:block;
  margin:15px auto;
  width:20%;
  padding:10px;
  cursor:pointer;
}
#myCursor{
  position:absolute;
  height:50px;
  width:50px;
  top:0;
  left:0;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
  <button id = "link1">Some link</button>
  <button id = "link2">Another Link</button>
  <img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>

html 中的自定义光标

Custom cursor in html

html

javascript

jquery

cursor-position