Question

我有一个HTML ul横幅，它有两个li子栏，在悬停时公开。但是，如果您将鼠标移开或远离另一个主条目，则悬停将丢失。

我想知道是否有一些方法可以在鼠标离开后轻松维持这种悬停。这不是我可以抛弃的东西所以我非常有兴趣扩展它以支持在鼠标离开几秒后保持它，但是如果将鼠标悬停在不同的li元素上则能够看到新信息

以下是我的JSFiddle，其中包含一个非常简单的演示，其中包含我的HTML / CSS，只显示该功能：JSFiddle

<body>
<div class="nav-outer-repeat">
    <div class="nav">
        <div class="table">
            <ul class="select">
                <li style="color: white;"> <a><b>Hover Test</b></a>

                    <div class="select_sub">
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                        <ul class="sub">
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                            <li style="color: white;"><a href="">Test</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div id="content-outer">
        <div id="content"></div>
    </div>

#content-outer  {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content    {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto 0 auto;
    max-width: 100%;
    min-width: 780px;
    padding: 15px 0px 25px 0px;
}
.nav-outer-repeat   {
    background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
    height: 77px;
}
.nav    {
    float: left;
    font-family: Tahoma;
    font-size: 13px;
    height: 38px;
    position: relative;
    width: 1080px;
    min-width: 600px;
    z-index: 500;
}
.nav-divider    {
    background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
    float: left;
    height: 40px;
    width: 15px;
}
.nav .select,
.nav .current   {
    display: table-cell;
    float: left;
    list-style: none;
    margin: 0 0px 0 0;
    padding: 0;
    white-space: nowrap;
}
.nav li {
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
}
.nav .select a  {
    color: #fff;
    display: block;
    float: left;
    height: 37px;
    line-height: 35px;
    padding: 0 0px 0 0px; 
    text-decoration: none;
    white-space: nowrap;
}
.nav .select_sub    {
    display: none;
    margin: 0 0 0 10px;
}
.nav .sub   {
    display: table;
    list-style: none;
    padding: 0;
}
.nav .select :hover .select_sub, 
.nav .current .show {
    background: url(../../core/images/shared/nav/back_0.gif);
    height: 75px;
    display: block;
    left: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 37px;
    width: 1200px;
    z-index: 100;
    transition:0s 50s;

}
.nav .select :hover .sub li a, 
.nav .current .show .sub li a   {
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 10px 0 10px;
    white-space: nowrap;
}
.clear  {
    clear: both;
    font-size: 0px;
    height: 0;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
}

我认为我最感兴趣的是它可以留在屏幕上的某种时间延迟，但我的所有尝试都失败了。我希望有人可以给我一些指导，用一些我可能会遗漏的CSS或者一些jQuery来解决这个问题吗？

Answer 1

您可以在悬停和正常情况下添加不同的过渡。确保使用可动画的属性隐藏菜单！显示无效，请务必尝试从height: 0px;转到height: auto;。

这是一种方法。

I've forked your fiddle。首先，我删除了:hover个状态，然后添加了：

.nav .select_sub{
  display: block;
}
.nav .select:hover .select_sub, 
.nav .select:hover .sub li a{
  margin-top: 0%;
  transition: all 0.2s;
}
.nav .select .select_sub, 
.nav .select .sub li a{
  margin-top: -100%;
  transition: all 2s 3s;
}

你可以看到我隐藏了一个带有较大上边距的菜单。当您将鼠标悬停在.select上时，保证金在0.2秒内变为零，这应足够快，以获得良好的用户体验。

当你停止悬停时，子菜单会保持三秒钟，然后再慢一点。

Answer 2

在纯CSS3中，您可以使用转换延迟：https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay设置下拉列表的不透明度。如果你不能使用CSS3，你必须使用JS（不一定是jquery）

Answer 3

像这样......但是我试过了。

HTML：

     <div class="menu">
        <p>Hover</p>
        <ul class="menu-content">
            <li>
                <ul>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                    <li>Menu 1</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                    <li>Menu 2</li>
                </ul>
            </li>   
        </ul>
    </div>

CSS：

.menu {
    width: 98%;
    text-align: center;
    padding: 20px 1%;
    background-color: #eee;
    overflow:  hidden;
}

.menu p {
    margin: 20px 0;
    color: #096847;
    font-size: 1.3em;
}

.menu:hover .menu-content {
    margin-top: 0;
}

.menu-content {
    margin-top: -100%;
    overflow: hidden;
    transition: all 1s ease-in;
}

.menu-content li {
    list-style-type: none;
}

.menu-content > li > ul > li {
    width: 25%;
    float: left;
    padding: 20px 0;
    background-color: #2aa87c;
    outline: 1px solid #ddd;
    cursor: pointer;
    color: #fff;
}

结果：

EXAMPLE

鼠标移开后，Hover CSS样式仍然存在

3 个答案: