javascript - 光标跟随 <div> - 鼠标向下或向右移动时消失

Question

我正在尝试使用 this method将 div 设为 fadeIn当用户将鼠标悬停在文本字段上时，该文本字段会告诉他们该字段中包含哪些类型的信息。我有<div>如果用户向上或向左移动鼠标，则在文本字段中跟随光标，但当我向下或移动鼠标时>右<div>运动过程中消失，鼠标停止时重新出现。 Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding .

$(document).ready(function() {
    $(document).bind("mousemove", function(e) {
        $(".hover").css({
            "left" : e.pageX,
            "top" : e.pageY
        });
    });
    $(".num").hover(function() {
        $(".hover").stop().html("Enter a number").delay(500).fadeIn(150);
    }, function() {
        $(".hover").stop().hide();
    });
});

.hover {
	display: none;
	position: absolute;
	float: left;
	font-family: Calibri, sans-serif;
	font-size: 0.7em;
	background-color: rgb(255,255,230);
	border: 1px solid black;
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
	padding: 1px 3px;
	z-index: 50;
}
input {
    margin: 30px;   
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='hover'></div>
<input type="text" class="num" size="2">

我尝试过应用相同的.hover()我对网页中的其他元素进行了 JQuery 方法，以查看将其应用于文本字段是否存在问题，但向下/向右消失的行为仍然存在。

在我的完整代码中，悬停的 <div>当用户第一次将鼠标悬停在产生效果的元素上时动态创建，但我无法让该方面工作是 JSFiddle。

由于其他人似乎很容易产生这种效果，因此我不仅想知道如何实现正确的行为，而且还想了解为什么我的尝试结果如此不稳定。

Answer 1

基本上，如果您的鼠标移到 .hover 叠加层上，它会在鼠标下方的元素上生成悬停“out”。向左/向右移动鼠标会使光标在覆盖的 div 上移动和移动。

将 pointer-events: none; 添加到您的 .hover 样式中。这将阻止它对鼠标可见并避免在 .hover 上生成任何事件:

http://jsfiddle.net/4ba70vy3/6/

.hover {
    pointer-events: none;
    display: none;
    position: absolute;
    float: left;
    font-family: Calibri, sans-serif;
    font-size: 0.7em;
    background-color: rgb(255, 255, 230);
    border: 1px solid black;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    padding: 1px 3px;
    z-index: 50;
}

更新:如果 .hover 位于鼠标下方，垂直移动也会导致同样的问题。

http://jsfiddle.net/4ba70vy3/7/

此外，正如 DevlshOne 所建议的那样，您不妨在控件上使用 title= 属性，也许只为旧版浏览器执行您的操作？