Question

我希望能够有一个div，当鼠标在div里面时，我会在光标旁边找到一个小的圆形标记。当我移动到此div之外时，光标标记将被移除并隐藏。

我找到了一个我想要的例子但不完全符合我的需要： -

上述问题： - 我只希望当我在div里面时出现黄色标记 - 当im在div之外时，标记被隐藏并且光标正常。 - 当我移动鼠标时，标记离光标太远

有什么想法吗？

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
 mouseX = Math.min(e.pageX, limitX);
 mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

}, 30);

由于

Answer 1

你不能用css吗？这样的事情：http://jsfiddle.net/felipemiosso/3964w/30/

刚刚在display:none;上添加了#follower并创建了新样式.centerdiv:hover #follower { display:block; }

要在光标停止时修复指针，请将margin-left:-8px; margin-top:-8px;添加到#follower。

更新了小提琴 http://jsfiddle.net/felipemiosso/3964w/35/

更新了小提琴2 http://jsfiddle.net/felipemiosso/3964w/41/

Answer 2

您可以执行类似操作，将display: none添加到关注者css，然后：http://jsfiddle.net/3964w/32/

$('.container').mousemove(function(e){
$("#follower").show();
  var offset = $('.container').offset();

   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
        $("#follower").hide(); 
});

Answer 3

问题出在setInterval函数中，每30毫秒调用一次在div中使用onmousemove来获取coordiantes。并在mouseenter上显示关注者。隐藏在mouseleave

上

Answer 4

更改容器css属性

.anyclass{
    cursor: URL("smallcircle.png");
 }

Answer 5

你可以使用这个库，我发现它真的很棒。 http://www.tippedjs.com/

jQuery div仅在另一个div中跟随光标移动

5 个答案: