html中的自定义光标[重复]

Question

我想在 div 中添加一个图像作为我的光标，但是当鼠标悬停在该 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 更容易实现。您必须事先调整光标图像的大小，在本例中，我将一个大小调整为 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 2

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

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>

Answer 3

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

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