将菜单悬停在某个位置 [英] Hover a menu at a certain position

问题描述

大家好，

我有一个悬停菜单(使用javascript)，当我将鼠标悬停在任何树节点上时，该菜单就会显示.

但是菜单的位置不正确...

谁能告诉我如何在我的鼠标光标所在的位置弹出悬停菜单....只要我有光标位置的X和Y坐标即可.

因此，具体地说，我想知道如何将悬停菜单放置在某些特定的坐标[x，y]上.

请帮帮我.紧急！

Snigdharani Behera

Hi all,

I have got a hover menu(using javascript) that is getting displayed when ever i mouseover on any of the tree node.

But the position of the menu is not correct...

Can any body tell me how do i pop up the hover menu at the position where my mouse cursor is.... Provided I have the X & Y co-ordinates of the cursor position.

So specifically, i want to know how to position a hover menu at some particular co-cordinates[x,y].

Please help me out. It''s urgent!!

Snigdharani Behera

推荐答案

大家好，

刚才找到了正确的答案.
它是这样的:

Hi All,

Just now found the correct answer.
It goes like this:

function ShowPopup(hoveritem, arg)
        {
            hp = document.getElementById("hoverpopup");
            // Set position of hover-over popup
            hp.style.position = "absolute";
            hp.style.top = getPosition(event).y - 5;
            hp.style.left = getPosition(event).x - 5;
            // Set popup to visible
            hp.style.visibility = "Visible";
        }

        function HidePopup()
        {
            hp = document.getElementById("hoverpopup");
            hp.style.visibility = "Hidden";
        }

        function getPosition(e)
        {
            e = e || window.event;
            var cursor = {x:0, y:0};
            if (e.pageX || e.pageY)
            {
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            }
            else
            {
                var de = document.documentElement;
                var b = document.body;
                cursor.x = e.clientX +
                    (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
                cursor.y = e.clientY +
                    (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
            }
            return cursor;
        }

但是现在我有一个问题，就是我无法选择菜单项.
因为一旦我尝试选择菜单项，鼠标就会触发，菜单消失.

有人可以帮忙!!

Snigdharani Behera

But now i have one problem, that is I am not able to select a menu item.
Because as soon as i try to select a menu item, the mouseout even fires, n the menu dissapears.

Can somebody help!!

Snigdharani Behera

尽管我没有收到任何答复，但我仍然想发布更多答案，以便使其他人受益.

如前所述，我找到了解决问题的方法.

尝试以下代码:

Hi,

Though I am not getting any response, still i would like to post more answers, so that others can be benefited.

I found a solution to my problem, stated earlier.

Try this code:

//#############New Code###############
        var menuArray = new Array();
        menuArray[0] = 'hoverpopup';
        //menuArray[1] = 'submenu2';
        var globalObject = '';
        var isActive = false;
        var ourTimer;

        function showhide(obj,onlink,arg)
        {
            targetObject = document.getElementById(obj).style;

            globalObject = targetObject;
            if(onlink)
            {
                clearTimeout(ourTimer);

                for (i=0; i < menuArray.length; i++)
                {
                    var tempObject = document.getElementById(menuArray[i]).style;
                    tempObject.visibility = "hidden";
                }

                targetObject.visibility = 'visible';
                targetObject.position = "absolute";
                targetObject.top = getPosition(event).y;
                targetObject.left = getPosition(event).x;
                isActive = true;
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }

        function layerTimer()
        {
            ourTimer = setTimeout("hideMenu()",0750);
        }

        function hideMenu()
        {
            if( !isActive )
            {
                globalObject.visibility = 'hidden';
            }
        }

        function layerCheck(flag)
        {
            if(flag)
            {
                isActive = true;
                clearTimeout(ourTimer);
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }
        window.onload = function()
        {
            for(var i=0;i<menuArray.length;i++)
            {
                var id = menuArray[i];
                var e = document.getElementById(id);
                e.onmouseover = function(e)
                {
                    layerCheck(true);
                }
                e.onmouseout = function(e)
                {
                    layerCheck(false);
                }
            }
        }
        //############################

<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table bgcolor="#0000FF">
            <tr><td><font color="#FFFFFF">Option 1</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 2</td></tr>
            <tr><td><font color="#FFFFFF">Option 3</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 4</td></tr>
            <tr><td><font color="#FFFFFF">Option 5</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 6</td></tr>
        </table>
    </div>

希望对别人有帮助！

Snigdharani Behera

Hope it helps others!!

Snigdharani Behera

这篇关于将菜单悬停在某个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！