0

我想创建一个菜单栏，在其中悬停时，项目旁边应该出现一个相关的额外菜单，当鼠标指针熄灭时，它应该消失。

例如，当您将鼠标指针放在此页面顶部的用户名上时，您会看到一个包含活动、权限、注销等的菜单。

我想实现这样的菜单。

切换额外菜单元素（例如 div）的可见性（或更改显示）属性是显而易见的。

但我的问题是我怎么能检测到鼠标指针悬停在额外的菜单上，它不应该消失，直到鼠标指针消失！

我不想使用 JQuery。

4

6 回答 6

2

纯 CSS 方法

小提琴：http: //jsfiddle.net/gvee/jrFse/

HTML

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Item2</li>
    <li>Item 3
        <ul>
            <li>Subitem 1</li>
        </ul>
    </li>
</ul>

CSS

ul
{
    list-style-type: none;
}

ul li
{
    padding: 5px;
    margin: 3px;
    border: 1px solid black;
}

ul li:hover
{
    background-color: lime;
}

li ul
{
    display: none;
}

li:hover ul
{
    display: block;
}

li ul li:hover
{
    background-color: red;
}

注意：还有一些样式留给你做，这只是为了说明原理。

于 2013-07-23T11:52:07.937 回答
1

CSS 有属性

element:hover{}

如需更美观的菜单，请使用 javascript

此外，如果您想在父元素悬停时更改子元素的样式，您可以使用

parentElement:hover childElement{}

所以这个想法可能是在其中获取一个外部 div(parentElement) 和一个标签以及另一个 div(childElement)。在 parentElement 悬停时，修改 childElement 的 display 属性，如上面的代码片段所示。

于 2013-07-23T11:04:15.693 回答
1

您可以使用以下设置弹出菜单。你想做的就是以你想要的方式重组它。您可以在这里进行演示。

HTML

    <div>
 <input type="button" ID="lnkModel"  OnClick="DisplayModal();" Text="OK" />
    </div>
    <div id="overlay"></div>
    <div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
        color: Red;" class="HideModal">
        This is modalpopup window
        <input type="button" ID="lnkOk"  OnClick="return RemoveModal();" Text="OK" />
    </div>

CSS

.ShowModal
 {
                top: 200px;
                left: 250px;
                z-index: 1000;
                position: absolute;
                background-color: White;
                display: block;
            }
            .HideModal
            {
                display: none;
            }
            .OverlayEffect
            {
                background-color: black;
                filter: alpha(opacity=70);
                opacity: 0.7;
                width: 100%;
                height: 100%;
                z-index: 400;
                position: absolute;
                top: 0;
                left: 0;
            }

JavaScript

function DisplayModal()
            {
                alert("Hai");
                document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
                document.getElementById("overlay").className = "OverlayEffect";
                document.getElementById("modalMsg").className = "ShowModal";
            }
            function RemoveModal()
            {
                document.getElementById("modalMsg").className = "HideModal";        
                document.getElementById("overlay").className = "";
                return false;
            }

更新

根据这个问题，您可以使用这种方式触发悬停

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

检查此问题以了解有关 css 和 js 悬停事件之间区别的更多信息。上面提到的css hover 与 javascript mouseover问题）。

于 2013-07-23T11:28:17.937 回答
0

您必须使用 Javascript 来更改要使其可见的元素的 CSS 属性。

element.style.visibility='visible'将使您的元素可见，但它也为元素保留空间，这不应该是一个问题，因为我假设该元素将具有更高的 z-index。

对于鼠标交互，请在此处查找 Javascript“onmouseover”事件： http ://www.w3schools.com/jsref/event_onmouseover.asp

于 2013-07-23T11:05:57.173 回答
0

谢谢大家的帮助和想法。

我想我已经解决了这个问题：

首先，我创建了一个具有固定宽度和高度属性的简单对象：

<div id="menu" style="width:200px; height:50px; overflow:visible;">

</div>

然后我添加了另一个 INSIDE菜单 DIV ！

这里我使用相对位置来使用 z-index 属性。（绝对位置也可以。）

left 属性让我的子菜单出现在正确的位置。

显示属性设置为无；在 javascript 代码中更改它会显示 DIV。

<div id="menu" style="width:200px; height:50px; overflow:visible;">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

之后，我为 MouseOver 和 MouseOut 添加了两个 javascript 函数：

<div id="menu" style="width:200px; height:50px; overflow:visible;" onmouseover="javascript: MouseOver();" onmouseout="javascript: MouseOut();">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

Javascript：

function MouseOver(){
    document.getElementById("sub-menu").style.display = "inline-block";
}

function MouseOut(){
    document.getElementById("sub-menu").style.display = "none";
}

这样当鼠标指针经过菜单DIV时，出现子菜单DIV，当鼠标指针经过子菜单DIV时，它也仍然在菜单DIV上，所以不会调用MouseOut函数！

诀窍只是在主菜单 DIV 内添加子菜单 DIV，并为其使用相对位置！更改显示属性很明显；）

原谅我不好的解释。谢谢。

于 2013-08-12T11:32:26.263 回答
0

我建议将 jQuery 用于此类事情，但这是您悬停问题的解决方案：

将动画附加到菜单的鼠标事件和用户名上。

 var elem =  getelementbyid("yourTrigger");
 var elem2 = getelementbyid("yourElementToShow");
 elem.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem.onmouseout = function(e) {
        elem2.style.display = "none";
    };
    elem2.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem2.onmouseout = function(e) {
        elem2.style.display = "none";
    };
于 2013-07-23T11:07:40.393 回答