子菜单 - 菜单栏中的淡入和淡出子菜单

Question

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

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

我想实现这样一个菜单。

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

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

我不想使用 JQuery。

Answer 1

纯 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;
}

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

Answer 2

CSS 有属性

element:hover{}

要更美观的菜单，请使用 javascript

另外，如果你想在父元素悬停时改变子元素的样式，你可以使用

parentElement:hover childElement{}

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

Answer 3

您可以使用以下内容来创建弹出菜单。您要做的就是以您想要的方式重组它。您可以在here 进行演示。

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

更新

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

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

查看此问题以了解更多关于 css 和 js 悬停事件之间的区别。 css hover vs. javascript mouseover上面提到的问题）。

Answer 4

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

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

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

Answer 5

我建议使用 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";
    };

Answer 6

感谢大家的帮助和想法。

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

首先我创建了一个简单的 fixed 宽度和高度属性：

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

</div>

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

这里我使用 relative 位置来使用 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，并使用相对位置！更改显示属性很明显;)

请原谅我的错误解释。 谢谢。