通过鼠标悬停动态定位div上方的图像

我想在图像上方显示div，以便div的顶部与光标对齐。
随着光标移动，div也应该移动（现在只是垂直）。
在IE（纯javascript请）。通过鼠标悬停动态定位div上方的图像

<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #ToolTip{position:absolute; width: 200px;background-color:Lime; top: 0px; left: 0px; z-index:400;visibility:hidden;} 
    </style> 
    <script language="javascript" type="text/javascript"> 
     function On() { 

      MoveToolTip("ToolTip", "event.y", "event.x"); 
      document.getElementById('ToolTip').style.visibility = 'visible'; 

     } 
     function Off() { 

      MoveToolTip("ToolTip", 0, 0); 
      document.getElementById('ToolTip').style.visibility = 'hidden'; 
     } 

     function MoveToolTip(layerName, top, left) { 
       document.getElementById(layerName).style.top = (eval(top)); 
      //document.getElementById(layerName).style.left = (eval(left) - 360); 

     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip" >This is a test </div> 
     <a href="www.www.com"><img alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" onmouseout="Off();" onmouseover="On();" /></a> 

    </div> 
    </form> 
</body> 
</html>

来源

2009-12-24 kenny

这里是你的问题可能的解决办法：

<html> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
    #ToolTip { 
     position:absolute; 
     width: 200px; 
     background-color:Lime; 
     z-index:400; 
     visibility:hidden; 
     cursor: pointer; 
    } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="ToolTip">This is a test</div> 
     <a href="www.www.com"> 
      <img alt="mg" id="base-img" border="0" src="http://www.google.com/logos/holiday09_4.gif" /> 
     </a> 
    </div> 
    </form> 
<script language="javascript" type="text/javascript"> 
    function showToolTip(e) { 
     e = e || window.event; // Older versions of IE handle events funny 
     // Added code that compensates for the window's scroll position. 
     var top = e.clientY + (window.pageYOffset || document.body.scrollTop) + 5; 
     moveToolTip("ToolTip", top, e.clientX); 
     document.getElementById('ToolTip').style.visibility = 'visible'; 

     // We need to cancel the center to ensure that the onmousemove event 
     // on the body element doesn't get triggered 
     e.cancelBubble = true; 
     if (e.stopPropagation) { e.stopPropagation(); } 
     return false; 
    } 
    function hideToolTip() { 
     moveToolTip("ToolTip", 0, 0); 
     document.getElementById('ToolTip').style.visibility = 'hidden'; 
     return false; 
    } 

    function moveToolTip(layerName, top, left) { 
     document.getElementById(layerName).style.top = (top + "px"); 
    } 

    document.onmousemove = hideToolTip; 
    document.getElementById("ToolTip").onmousemove = showToolTip; 
    document.getElementById("base-img").onmousemove = showToolTip; 
</script> 
</body> 
</html>

事情我改变：

给了功能更可读的名字：
- 更名On到showToolTip
- 更名Off到hideToolTip
的event变量现在被传递给showToolTip功能。这需要得到光标的x，y位置，对窗口的滚动位置
新增return false到showToolTip和hideToolTip
替换onmouseout和onmouseover与更广泛的支持onmousemove事件
得到补偿
添加的代码通过添加以下内容来消除闪烁：
- 添加了onmousemove事件到文档，其中调用hideToolTip
- 新增onmousemove事件刀尖格，这就要求showToolTip
新增+ "px"语句来.style.top分配。如果您为样式指定整数，某些浏览器会感到困惑。
将脚本声明移动到页面底部。
将事件分配移至javascript并从标记中删除onmousemove属性
将cursor: pointer样式添加到工具提示中。这消除了光标闪烁。
改变的代码格式

我还公布了工作示例：http://www.the-xavi.com/static/so-hover-div.html

希望这有助于。

来源

2009-12-24 15:54:59 Xavi

这不会移动div，因为我将光标移动到图像上方。 – kenny 2009-12-24 16:03:33

也document.body.scrollTop不起作用，至少不在IE8中 – kenny 2009-12-24 16:22:46

我已经添加到您的解决方案onmousemove事件（类似于Can BerkGüder建议），并将document.body.scrollTop更改为document.documentElement.scrollTop ;现在问题是闪烁 – kenny 2009-12-24 16:33:30

可以轻松实现像这样使用jQuery和插件qTip

编辑：使用JavaScript代码的问题是，你是不是在引用您的移动功能的实际屏幕位置，只是文字。您必须在开/关功能中获取光标的实际位置，将其作为数字传递给移动功能。

来源

2009-12-24 15:29:22 Ariel

我不想那个，请纯粹的JS。 – kenny 2009-12-24 15:31:00

+1，如果有一个稳定的jQuery插件可以处理这个问题，它证明可以节省很多痛苦。 – 2009-12-24 15:31:57

更新了qTipe的链接（这是广泛使用和很好），并试图回答无问题jQuery – Ariel 2009-12-24 15:39:12

您可能想要优化此设置以避免闪烁。

<html> 
 
<head> 
 
<style type="text/css" media="screen"> 
 
#ToolTip { 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
\t padding: 5px; 
 
\t background-color: red; 
 
} 
 
</style> 
 
<script type="text/javascript" charset="utf-8"> 
 

 
function Move(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
} 
 

 
function On(e) { 
 
\t MoveToolTip("ToolTip", e.x, e.y); 
 
\t document.getElementById("theImage").onmousemove = Move; 
 
\t document.getElementById("ToolTip").style.visibility = 'visible'; 
 
} 
 

 
function Off(e) { 
 
\t document.getElementById("theImage").onmousemove = null; 
 
\t document.getElementById("ToolTip").style.visibility = 'hidden'; 
 
} 
 

 
function MoveToolTip(layerName, x, y) { 
 
\t document.getElementById(layerName).style.left = x + 'px'; 
 
\t document.getElementById(layerName).style.top = y + 'px'; 
 
} 
 

 
function init() { 
 
\t document.getElementById("theImage").onmouseover = On; 
 
\t document.getElementById("theImage").onmouseout = Off; 
 
} 
 
</script> 
 
</head> 
 
<body onload="init();"> 
 
    <div> 
 
     <div id="ToolTip">This is a test</div> 
 
     <a href="www.www.com"><img id="theImage" alt="mg" border="0" src="http://www.google.com/logos/holiday09_4.gif" /></a> 
 
    </div> 
 
</body> 
 
</html>

来源

2009-12-24 15:44:21

很好地完成。你甚至分开了事件接线...... :) – Ariel 2009-12-24 15:50:51

你是什么意思通过优化？ – kenny 2009-12-24 15:52:04

我得到一个错误（内函数On）：Microsoft JScript运行时错误：'x'为空或不是对象 – kenny 2009-12-24 15:57:38

通过鼠标悬停动态定位div上方的图像

回答

相关问题