javascript - .mouseover 在此代码中无法正常工作

Question

刚开始学习 Javascript，这非常困难。但是我遵循了一个教程并按照他在他的视频中所说的那样做了，但我的结果仍然不是我所期望的，也不是他在他的视频中得到的。我想知道为什么会这样，我该如何解决？

我想让方框突然出现，里面有文字，只要光标在标记的区域内(LABEL- HTML 方框)，我就会一直跟随光标。

代码如下:

$("#rulesInfo").mouseover(function(e) {
	var hovertext = "Info for the block will come here.";
	$("#hoverdiv").text(hovertext).show();
	$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
  }).mouseout(function() {
  $("#hoverdiv").hide();
  });

#hoverdiv {
display: none;
position: absolute;
font-size: 12px;
background-color: #161616;
color: #fff;
border: 1px solid red;
padding: 8px;
border-radius: 5px;
}

<FORM>
    <DIV ID="bottom">
    <P>
	  <INPUT TYPE="checkbox" NAME="checkedRules" VALUE="yes" REQUIRED /><LABEL FOR="checkedRules" ID="rulesInfo">I have <A HREF="#" TARGET="_blank">read the Rules and Conditions</A> for the trip.</LABEL>
	</P>
  </DIV>
</FORM>

<DIV ID="hoverdiv"></DIV>

<SCRIPT TYPE="text/javascript" SRC="jquery.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="app.js"></SCRIPT>

Answer 1

您想要做的是使用 mousemove 事件，该事件在每次鼠标移动对象时触发。 mouseover 仅在鼠标第一次移到对象上时发生。

看这里:

$("#rulesInfo").mousemove(function(e) {
var hovertext = "Info for the block will come here.";
$("#hoverdiv").text(hovertext).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
  }).mouseout(function() {
  $("#hoverdiv").hide();

});

http://jsfiddle.net/mzwj26a7/