Question

我想在图像上方显示div，以便div的顶部与光标对齐移动光标时，div也应该移动（现在只是垂直移动）在IE中（纯javascript请）。

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

Answer 1

以下是您的问题的可能解决方法：

<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
- 向工具提示div添加了onmousemove个事件，该部门调用了showToolTip
在+ "px"作业中添加了.style.top声明。如果为样式指定整数，某些浏览器会混淆。
将脚本声明移至页面底部。
将事件分配移至javascript并从标记中删除onmousemove属性
在工具提示中添加了cursor: pointer样式。这会删除光标闪烁。
更改了代码格式

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

希望这有帮助。

Answer 2

您可以使用jQuery和插件qTip

轻松实现这样的功能

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

Answer 3

您可能希望对此进行优化以避免闪烁。

<html>
<head>
<style type="text/css" media="screen">
#ToolTip {
	position: absolute;
	visibility: hidden;
	padding: 5px;
	background-color: red;
}
</style>
<script type="text/javascript" charset="utf-8">

function Move(e) {
	MoveToolTip("ToolTip", e.x, e.y);
}

function On(e) {
	MoveToolTip("ToolTip", e.x, e.y);
	document.getElementById("theImage").onmousemove = Move;
	document.getElementById("ToolTip").style.visibility = 'visible';
}

function Off(e) {
	document.getElementById("theImage").onmousemove = null;
	document.getElementById("ToolTip").style.visibility = 'hidden';
}

function MoveToolTip(layerName, x, y) {
	document.getElementById(layerName).style.left = x + 'px';
	document.getElementById(layerName).style.top = y + 'px';
}

function init() {
	document.getElementById("theImage").onmouseover = On;
	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>

通过鼠标悬停动态定位div高于图像

3 个答案: