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

刚刚开始学习Javascript，它很难。但是我遵循了一个教程，就像他在他的视频中所说的那样，但我的结果并不是我所期望的，也不是他在他的视频中得到的结果。我想知道为什么，以及我如何解决这个问题？.mouseover在此代码中无法正常工作

我想让文本框出现在任何地方，并且只要它位于标记的区域内（LABEL - HTML中的框），就可以沿着光标移动。

下面的代码：

$("#rulesInfo").mouseover(function(e) { 
 
\t var hovertext = "Info for the block will come here."; 
 
\t $("#hoverdiv").text(hovertext).show(); 
 
\t $("#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> 
 
\t <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> 
 
\t </P> 
 
    </DIV> 
 
</FORM> 
 

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

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

来源

2014-09-23 Papu

您的标签应该围绕输入。 – Mike 2014-09-23 15:37:39

看起来在这里工作得很好：http://jsfiddle.net/g3eh1u4s/你有没有正确加载你的JS库？ – Dan 2014-09-23 15:38:02

嗯，不知道。我在我的浏览器上测试它，并将代码写入Notepad ++中。我应该下载一些软件使其更加正确吗？而我的浏览器是Google Chrome版本37.0.2062.120 m – Papu 2014-09-23 15:39:27

什么你想要做的就是用户的鼠标移动事件它将触发对对象的每个鼠标移动。 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/

来源

2014-09-23 15:42:00 developer82

啊非常感谢你。 Mousemove是正确的事件。虽然教程的人使用鼠标悬停。不知道为什么代码改变了很多O_O – Papu 2014-09-23 15:53:46

想象一下，他将mouseover改为mousemove，只是没有在教程中告诉它。坏教程：D – Papu 2014-09-23 16:06:36

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

回答

相关问题