在跨度悬停时在鼠标光标处显示DIV

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>

4 个解决方案

#1

You're pretty much there:

你几乎就在那里：

<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>

And for the JS:

而对于JS：

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;
}

#2

i quickly set up this example, starting with Dušan Radojević code:

我快速建立了这个例子，从DušanRadojević代码开始：

$("#spanhovering").hover(function(event) {
    $("#divtoshow").css({top: event.clientY, left: event.clientX}).show();
}, function() {
    $("#divtoshow").hide();
});

jsfiddle

的jsfiddle

#3

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:

实际上，我更喜欢Imperative的答案。我没有权限在他的帖子中添加评论，所以这是他的代码，调整使其稍微适应性更强：

$(".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/

You will need to be a bit clever with your div and span id naming conventions.

您需要对div和span id命名约定有点聪明。

#4

$('#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.

我认为这段代码对你的情况很有用。

#1