Question

刚刚开始学习Javascript，这很难。但是我按照一个教程进行了操作并按照他在视频中所说的那样做了，但我的结果仍然不是我所期望的以及他在视频中得到的结果。我想知道为什么会这样，以及如何解决这个问题？

我希望框中不会出现文本，并且只要它位于标记区域内（ LABEL - HTML框中），请按住光标。

以下是代码：

＆＃13;

$("#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();
  });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您想要做的是使用 mousemove 事件，该事件会在对象的每次鼠标移动时触发。 鼠标悬停仅在鼠标首次移动到对象上时才会发生。

见这里：

$("#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/

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

1 个答案: