纯CSS方法

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属性，如上面的代码片段所示。

Answer 3

您可以使用以下内容来设置POP上传菜单。所有你想做的就是以你想要的方式重组它。您可以在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

感谢大家的帮助和想法。

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

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

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

</div>

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

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

左侧属性让我的子菜单显示在正确的位置。

display属性设置为none;在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 INSIDE，并使用它的相对位置！ changin显示属性很明显;）

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

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

6 个答案:

纯CSS方法

HTML

CSS