在跨度hover时在鼠标光标处显示DIV

当用户将鼠标hover在SPAN或DIV上时，我希望DIV取消隐藏并显示在鼠标光标处。

我做了这个function，但它不起作用（加载了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; } } 
test
 

 Mouse over this 

Answer 1

你几乎就在那里：

 
test
 

 Mouse over this 

而对于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; } 

Answer 2

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

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

的jsfiddle

Answer 3

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

 $(".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(); }); 
test
 

 Mouse over this 

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