jquery - 自定义 css 光标在特定位置时闪烁？

Question

请参阅下面的代码段。

当 offsetx 和 offsety 为 20 或更高时，它看起来很好。但是，当我尝试将它们设置为 5 时(这对我来说似乎很合适)，出现了明显的“闪烁”。有什么我可以做的吗？

$(document).ready(function(){
		offsetx = 5;
    offsety = 5;
  $('#oy').html("offsety=" + offsety);
  $('#ox').html("offsetx=" + offsetx);
    $('#area1').mouseout(function(){
        $('#c1').hide();
        return false;
    }).mouseenter(function(){
        $('#c1').show();
        return false;
    }).mousemove(function(e){
        $('#c1').css('left', e.clientX - offsetx).css('top', e.clientY - offsety);
    });
});

$('#toggle').on('click',function() {
	if ($('#toggle').html() == 'Exact') {
  	$('#toggle').html('Offset');
    offsetx = 5;
    offsety = 5;
	} else {
  	$('#toggle').html('Exact');
    offsetx = 25;
    offsety = 15;
	}
  $('#oy').html("offsety=" + offsety);
  $('#ox').html("offsetx=" + offsetx);
})

#area1 {
	height: 50px;
	border: 3px dashed #CCCCCC;
	background: #FFFFFF;
	padding: 20px;
	cursor: none;
}

#toggle { cursor: pointer; padding: 3px; border: 1px solid black; margin-top: 10px;}
#c1 {
	cursor: none;
	width: 12px;
	height: 12px;
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	z-index: 10000;
	background: #000;
	border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1"></div>    
<div id="area1"></div>
<br>
<span id="toggle">Offset</span><span><- Click to toggle</span>
<br><br>
<div id="oy"></div>
<div id="ox">

</div>

Answer 1

尝试添加

 pointer-events: none;

#c1 的 CSS 规则。

还没有尝试过，但它可能会解决您的问题。不过，我不确定是否所有浏览器都支持指针事件。