当用户将鼠标悬停在文本字段上时,我正尝试使用此方法将div获取到fadeIn
,该文本字段会告诉用户进入字段的信息类型。如果用户将鼠标向上或向左移动,则在文本字段中,<div>
会跟随光标,但当我将鼠标向下或者向右时,<div>
会在移动过程中消失,并在鼠标停止时重新出现。这是一个JSFiddle,显示了我的相关代码和它正在构建的奇怪行为。
$(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来实现这一点。
由于这种效果似乎很容易被其他人产生,我不仅想知道如何实现正确的行为,还想了解为什么我的尝试如此不稳定。
基本上,如果鼠标在.hover
覆盖上移动,它会在鼠标下方的项目上生成一个悬停"out"。向左/向右移动鼠标会使光标在覆盖的分区上移动。
将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;
}
更新:如果悬停在鼠标下方,垂直移动也会导致同样的问题。
http://jsfiddle.net/4ba70vy3/7/
此外,正如DevlshOne
所建议的那样,您还不如在控件上使用title=
属性,也许只对较旧的浏览器使用您的属性?
只需在.hover
类中添加一个pointer-event:none
工作示例:http://jsfiddle.net/4ba70vy3/