在跨度懸停時在鼠標光標處顯示DIV

Question

當用戶將鼠標懸停在SPAN或DIV上時，我希望DIV取消隱藏並顯示在鼠標光標處。

我做了這個功能，但它不起作用（加載了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>

Answer 1

你幾乎就在那里：

 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> 

Answer 2

我快速建立了這個例子，從DušanRadojević代碼開始：

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

的jsfiddle

Answer 3

實際上，我更喜歡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/

您需要對div和span id命名約定有點聰明。

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

我認為這段代碼對您的案例很有用。