光标跟随 - 当鼠标向下或向右移动时消失[英]Cursor-following - Disappears when mouse moves down or right 本文翻译自 Michael Doughty 查看原文 2014-09-19 1106 css/

I'm trying to use this method to get a div to fadeIn when a user mouses over a text field that tells them what sort of information goes into the field. I've got the <div> to follow the cursor while in the text field if the user moves the mouse up or left, but when I move the mouse down or right the <div> disappears during the motion to reappear when the mouse stops. Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding.

当用户将鼠标悬停在文本字段上时，我正在尝试使用此方法将div转换为fadeIn，该文本字段告诉他们哪些信息进入字段。如果用户向上或向左移动鼠标，我在文本字段中有

跟随光标，但是当我向下或向右移动鼠标时，

在运动过程中消失，当鼠标停止时再次出现。这是一个JSFiddle显示我的相关代码和奇怪的行为，它是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">

I have tried applying the same .hover() JQuery method to other elements in my web page to see if it's a problem with applying it to a text field, but the down/right vanishing behavior persisted.

In my full code, the hovering <div> is created dynamically when the user first mouse-overs an element which produces the effect, but I couldn't get that aspect to work is JSFiddle.

在我的完整代码中，当用户第一次鼠标悬停一个产生效果的元素时，动态创建悬停

，但是我无法使这个方面起作用是JSFiddle。

Since this effect seems easily-produced by others I'd like to know not only how to achieve the correct behavior but also understand why my attempt came out so wonky.

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

2 个解决方案

#1

Basically if your mouse moves over the .hover overlay, it generates a hover "out" on the item underneath your mouse. Moving the mouse left/right causes the cursor to move on and off the overlaid div.

基本上，如果您的鼠标移动到.hover叠加层上，它会在鼠标下方的项目上生成“悬空”。向左/向右移动鼠标会使光标在重叠的div上移动和移动。

Add pointer-events: none; to your .hover style. This will stop it being visible to the mouse and avoid generating any events on the .hover:

添加指针事件：无;你的.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;
}

Update: If the .hover was below the mouse, vertical movement would cause the same problem.

更新：如果.hover低于鼠标，垂直移动会导致同样的问题。

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

Also, as DevlshOne suggests, you might as well use the title= attribute on the controls and maybe just do yours for older browsers?

另外，正如DevlshOne建议的那样，您可以在控件上使用title =属性，也许只为旧版浏览器使用？

#2

Just add a pointer-event:none to the .hover class

只需在.hover类中添加指针事件：none即可

Working example: http://jsfiddle.net/4ba70vy3/

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

#1