CODEWITHSUNDEEP
jquerycss
user736893
user736893

Reputation:

Flicker when custom css cursor in specific position?

See snippet below.

When offsetx and offsety are 20 or higher, it looks fine. However when I try to set them to 5, which seems to line up perfectly to me, there is a significant "flicker". Is there anything I can do about it?

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

Upvotes: 0

Views: 952

Answers (2)

Daniel AG
Daniel AG

Reputation: 350

Try adding

 pointer-events: none;

to your CSS rule for #c1.

Haven't tried it, but it may fix your problem. I'm not sure if pointer-events is supported in all browsers though.

Upvotes: 3

Jordan Soltman
Jordan Soltman

Reputation: 3893

You need to make two changes. First change your event from mouseout to mouseleave, secondly, restructure your HTML such that #c1 is within #area.

Essentially what is happening is that the #c1 element is outside of the #area element so when it shows up under your mouse your mouse has "moved out" of the #area element. Thus it hides it and you get the weird flickering behavior.

Updated fiddle:

https://jsfiddle.net/etjs7gLL/2/

Upvotes: 1

Related Questions