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

时间:2014-09-19 14:31:06

标签: javascript jquery html css

当用户将鼠标移到文本字段上时,我尝试使用this method来获取div fadeIn,该文本字段告诉他们哪些信息会进入该字段。如果用户移动鼠标向上向左,我在文本字段中有<div>跟随光标,但是当我移动鼠标时鼠标向下向右鼠标停止时,<div>在运动过程中消失,重新出现。 Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding

&#13;
&#13;
$(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();
    });
});
&#13;
.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;   
}
}
&#13;
<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">
&#13;
&#13;
&#13; 我尝试将相同的.hover() JQuery方法应用于我的网页中的其他元素,以查看将其应用于文本字段是否存在问题,但是向下/向右消失行为仍然存在。

< / p>

在我的完整代码中,当用户首先将鼠标悬停在产生效果的元素上时,动态创建悬停<div>,但我无法使该方面起作用是JSFiddle。

由于这种效果似乎很容易被其他人产生,我不仅想知道如何实现正确的行为,而且还要了解为什么我的尝试出现如此糟糕。

2 个答案:

答案 0 :(得分:4)

基本上,如果您的鼠标移过.hover叠加层,它会在鼠标下方的项目上生成“悬空”。向左/向右移动鼠标会使光标在重叠的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=属性,也许只针对较旧的浏览器使用属性?

答案 1 :(得分:0)

只需向pointer-event:none班级

添加.hover即可

工作示例:http://jsfiddle.net/4ba70vy3/