为什么使用MouseOver创造懒惰的体验?jQuery

Question

  
   
            var mouseX;
			var mouseY;
			$(document).mousemove( function(e) {
  			 	mouseX = e.pageX; 
   				mouseY = e.pageY;
			});
			$(".test").mouseover(function(){
  				$('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block', 'z-index':'10'});
			});
			$("#DivToShow").mouseover(function(){
  				$('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block', 'z-index':'10'});
			});
			$(".test").mouseleave(function(){
  				$('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'none', 'z-index':'10'});
			});

body {
font: 1em/1.67 'Open Sans', Arial, Sans-serif;
margin: 0;
background: #010101;
}
.masonry {
margin: 10em 10em;
padding: 0;
-moz-column-gap: 4.3em;
-webkit-column-gap: 4.3em;
column-gap: 4.3em;
font-size: .85em;
}
.item {
display: inline-block;
background: #3D3D3D;
color: white;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
border: 1px solid #737373;
border-radius: 5px;
text-align: center;
}
.item:hover {
-webkit-filter: contrast(.2);
filter: contrast(.2);
}
@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
.item .img_1 {
display: block;
height: 130px;
width: 275px;
margin: 0 auto;
padding-bottom: 10px;
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script>
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div>
		<div class="masonry">
  			<a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"><div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div></a>
   			<a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php"><div class="item">Php Form <br> MySQL Database</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
   			<a href=""><div class="item">...</div></a>
		</div>

使用完整页面会更好。

描述：
当使用类(测试(悬停在DIV上时，它将用ID(Divtoshow(显示DIV，并继续用鼠标移动DIV。但是当它移动时它会跳跃。为什么这是这样，我该如何修复？

Answer 1

您在此使用的鼠标事件仅在指针进入元素时才会触发。您需要使用Mousemove事件，该事件是在指针移动在元素内时会触发的。