出现在悬停和保持可见 [英] appear on hover and stay visible

问题描述

第一次在这里提出问题...

First time asking a question here...

我正在做一个带有一些效果的下拉菜单，我从cssdeck.com获得。
基本上nav是从一个源，而子菜单从另一个。
我混合了两个cssdeck.com源码使它看起来像一个。

I'm making a drop down menu with some effects that I got from cssdeck.com. Basically the nav is from one source, and the sub menu from another. I've mixed two cssdeck.com source to make it look like one.

到目前为止，我有子菜单出现悬停，但可以不会让它保持可见，所以我可以点击子菜单。

So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.

代码很长，很复杂，我不知道如何显示/共享为你检查...

The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...

如何让A出现在B：hover和使A保持可见，当我将指针移动A在A上选择内容

How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????

<nav>
    <div class="nav_main ph-dot-nav"> 
        <a href="#">Home</a>
        <a href="#">About
            <div id="sub_about">
                <ul>
                    <li class="li_first"><a href="#">회사소개</a> </li>
                    <li><a href="#">대표인사말</a> </li>
                    <li class="li_last"><a href="#">회사연혁</a></li>
                </ul>
            </div>
        </a>
         <a href="#">Services</a>
         <a href="#">Portfolio</a>
         <a href="#">Partners</a>
         <a href="#">Contact</a>
        <div class="effect"></div>
    </div>
</nav>

Fiddle Demo here

推荐答案

要使用CSS，你需要遵守的规则。首先看看这个pic。
http://i.imgur.com/IAsz39w.png
（我很喜欢，如果有人帮我发布图片）

To achive this with CSS there's are rules your need to stick with. First take a look as this pic. http://i.imgur.com/IAsz39w.png (I'd love it, if someone help me post a pic)

• 在您的 Menu 标记和 subMenu 。


• 使用简单的悬停阶段，例如


• 子菜单必须是菜单
的子菜单>

• must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
• use the simple hover stage like follow
• subMenu must be children of Menu

隐藏 subMenu

.subMenu{
    display: none;
}

make subMenu 当您悬停在其父级或其自身上时

make subMenu appear when you hover on its parent or itself

.menu:hover .subMenu{
    display: block;
}

说明：DOM的悬停状态非常简单。如果你在一个子元素上悬停，它也意味着你悬停在其父。所以这是你不能让菜单和 subMenu 之间的任何空格。因为移动你的光标悬停在1px的1ms，DOM会理解为悬停状态。所以它会隐藏图片中的 subMenu away

Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away

例如：假设你的子菜单没有隐藏，所以如果你悬停在 subMenu 上，DOM也会理解为你还在悬停在菜单（父菜单）

For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent menu)

这篇关于出现在悬停和保持可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！