jQuery 在跨度悬停时在鼠标光标处显示 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15158180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show DIV at mouse cursor on hover of span
提问by Mbrouwer88
I want a DIV to unhide and appear at the mouse cursor when the user hovers over a SPAN or DIV.
当用户将鼠标悬停在 SPAN 或 DIV 上时，我希望 DIV 取消隐藏并出现在鼠标光标处。
I made this function but it does not work (jquery is loaded).
我做了这个功能，但它不起作用（加载了 jquery）。
function ShowHoverDiv(divid){
function(e){
var left = clientX + "px";
var top = clientY + "px";
$("#"+divid).toggle(150).css("top",top).css("left",left).css("position","fixed");
return false;
}
}
<div id="divtoshow" style="display:none">test</div>
<br><br>
<span onmouseover="ShowHoverDIV('divtoshow')">Mouse over this</span>
回答by Simon Adcock
You're pretty much there:
你几乎在那里：
function hoverdiv(e,divid){
var left = e.clientX + "px";
var top = e.clientY + "px";
var div = document.getElementById(divid);
div.style.left = left;
div.style.top = top;
$("#"+divid).toggle();
return false;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divtoshow" style="position: fixed;display:none;">test</div>
<br><br>
<span onmouseover="hoverdiv(event,'divtoshow')" onmouseout="hoverdiv(event,'divtoshow')">Mouse over this</span>回答by Imperative
回答by Simon Adcock
Actually, I much prefer Imperative's answer. I don't have privs to add a comment to his post, so here is his code, tweaked to make it slightly more adaptable:
实际上，我更喜欢命令式的回答。我没有权限在他的帖子中添加评论，所以这是他的代码，经过调整以使其更具适应性：
$(".spanhover").hover(function(event) {
var divid = "#popup" + $(this).attr("id")
$(divid).css({top: event.clientY, left: event.clientX}).show();
}, function() {
var divid = "#popup" + $(this).attr("id")
$(divid).hide();
});
http://jsfiddle.net/SiCurious/syaSa/
http://jsfiddle.net/SiCurious/syaSa/
You will need to be a bit clever with your div and span id naming conventions.
你需要对你的 div 和 span id 命名约定有点聪明。
回答by misoukrane
$('#divToShow,#span').hover(function(e){
var top = e.pageY+'px';
var left = e.pageX+'px'
$('#divToShow').css({position:'absolute',top:top,left:left}).show();
},
function(){
$('#divToShow').hide();
});
<div id="divToShow" style="display:none">test</div>
<br/><br/>
<span id="span" >Mouse over this</span>
I think this code will be useful for your case.
我认为这段代码对你的情况很有用。
