Question

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

＆＃13;

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');
        }

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我如何正确实施？感谢

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

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

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

更复杂的解决方案是使用数组来注册按钮坐标和尺寸，然后使用mousemove和each不断检查图像坐标宽度与存储的按钮尺寸，但取决于您还有什么＆＃39;我可能会遇到性能损失。

如果您将pointer-events: none添加到#myCursor css，则可以防止图像本身偶尔瞬间遮挡光标，从而提高性能。

＆＃13;

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();
  	}
   }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

自定义光标在html中

3 个答案: