如何设置菜单悬停延迟

时间：2015-02-17 06:56:26

标签： jquery html css

工作示例：

JSFiddle：http://jsfiddle.net/txdjyt7t/1/

所以我有一个UL / LI菜单，当我将鼠标悬停在不同的标题上时，会显示不同的选项。如果我将鼠标悬停在示例中的“链接2”上，然后稍微将鼠标悬停在“链接3”上以选择一个选项，则会因为mouseenter事件而更改显示的内容。虽然我理解它是如何编码的，但我想知道我是否可以设置一个小延迟，因此它忽略了轻微悬停在“Link 3”上并且只是保持“Link 2”内容可见。

HTML 

<div id="navCategories">
<div class="wrapper">       
    <div id="nav">
        <ul>
            <li><a href="/">Home</a></li>
            <!--<li><a href="my_account">My Account</a></li>-->
            <li><a href="#" class="menuLink">Link 2 <div class="oclmenu openmenu"></div></a>
            <div class="nav-div">
                <ul class="nav-blocks">
                    <li><a href="what-is-#-pbx"><span>1</span></a></li>
                    <li><a href="business-#-pbx-plans"><span>2</span></a></li>
                    <li><a href="#"><span>3</span></a></li>
                </ul>
                <ul class="nav-list">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
                <ul class="nav-list">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
            </li>

            <li><a href="#" class="menuLink">Link 3 <div class="oclmenu openmenu"></div></a>
            <div class="nav-div">
                <ul class="nav-blocks">
                    <li><a href="what-is-#-pbx"><span>A</span></a></li>
                    <li><a href="business-#-pbx-plans"><span>B</span></a></li>
                    <li><a href="#"><span>C</span></a></li>
                </ul>
                <ul class="nav-list">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
                <ul class="nav-list">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </div>
            </li>

        </ul>
        <div style="clear: both;"></div>

    </div>
</div>  
</div>

的jQuery 

$(document).on({
    mouseenter: function () {       
        if (!$("#showCat").is(":visible")) {
            $(this).find("div").fadeIn(0);
            $(this).find("ul").fadeIn(0);
        }
    },

    mouseleave: function () {
        if (!$("#showCat").is(":visible")) {
            $(this).find("div").fadeOut(0);
            $(this).find("ul").fadeOut(0);
        }
    }
}, "#nav ul li");

CSS 

#navCategories { position: relative; background: #006bb2; width: 1131px; margin-left: auto; margin-right: auto; height: 65px; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0px 0px 3px #999 !important;  }
#navSpacer { border-top: 0px solid #b7ccdb; border-bottom: 0px solid #fff; margin-top: 20px; }
#nav { margin-left: 10px; }
#nav ul, #nav ul ul { z-index: 10; width: 1131px; }
#nav ul { list-style-type: none; margin: 0px; margin-top: 10px; padding: 0px; position: absolute; }
#nav ul div { border: 1px solid #999; border-top: 0px; display: none; width: 100%; height: 170px; padding: 10px; top: 55px; position: absolute; left: -10px; background: #fff; box-sizing: border-box; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
#nav ul ul { display: none; position: relative; float: left; background: #fff; width: 20%; padding: 0px; margin: 0px; }
#nav ul ul li { float: none; margin-right: 0px;  }
#nav ul .nav-blocks { width: auto; }
#nav ul .nav-blocks li { float: left; margin-right: 0px; }
#nav ul .nav-blocks li a { height: 150px; width: 180px; display: block; padding: 0px; font-size: 17px !important; background-position: 50% 40% !important; background-repeat: no-repeat !important; position: relative; }
#nav ul .nav-blocks li a span { position: absolute; bottom: 15px; width: 180px; left: 0px; text-indent: 0px; height: 20px; line-height: 20px; text-align: center; }
#nav ul .nav-blocks li a:hover { }
#nav ul ul li a { height: 35px; color: #444 !important; line-height: 35px; padding-left: 20px; padding-right: 20px; border-radius: 5px; }
#nav ul ul li a:link,#nav ul ul li a:visited { font-size: 14px; color: #ccc; text-transform: none; }
#nav ul ul li a:hover,#nav ul ul li a:active { color: #fff; background-color: #e2f3ff !important; }
#nav ul > li:hover  > a { color: #000 !important; background: #fff;  }
#nav ul li { float: left; margin: 0px; }
#nav ul li a { display: block; padding: 0px 20px; height: 55px; line-height: 45px; border-top-right-radius: 5px; border-top-left-radius: 5px; color: #fff !important;  }
#nav ul .nav-list li a { border-radius: 0px; padding: 0px; margin: 0px; text-indent: 25px; font-size: 17px !important; height: 50px; line-height: 50px; background: url("../img/navigation/arrow.png") no-repeat 10px 51% !important;  }
#nav ul .nav-list { padding-left: 15px; }
#nav ul .nav-list li { border-bottom: 1px solid #ddd; box-sizing: border-box; }
#nav ul .nav-list li:last-child { border-bottom: 0px; }
#nav ul li a:hover { background: #fff; color: #444 !important; }

4 个答案:

答案 0 :(得分：0)

您可以在悬停时使用过渡属性来延迟。

#nav ul > li:hover  > a { color: #000 !important; background: #fff; -webkit-transition:2s; -moz-transition:2s }

http://jsfiddle.net/txdjyt7t/3/

答案 1 :(得分：0)

如果你想在jQuery的动画中设置延迟，你应该在函数内设置它。例如.fadeIn（1000）// 1000ms 1秒

你可以尝试

    $(document).on({
    mouseenter: function () {       
        if (!$("#showCat").is(":visible")) {
            $(this).find("div").fadeIn(1000);
            $(this).find("ul").fadeIn(1000);
        }
    },

    mouseleave: function () {
        if (!$("#showCat").is(":visible")) {
            $(this).find("div").fadeOut(1000);
            $(this).find("ul").fadeOut(1000);
        }
    }
}, "#nav ul li");

答案 2 :(得分：0)

请尝试以下操作： Demo

<强> CSS： 

li:hover > a {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;

}

答案 3 :(得分：0)

对于对此感兴趣的任何人，我研究了如何在每个菜单选项之间设置延迟。

解决方案：http://jsfiddle.net/txdjyt7t/6/

而不是display: none上的li div，我需要使用visibility: hidden并使用visibility: visible来展示它。然后，我在每个visible和hidden上使用了转换延迟。

不再需要jQuery。

CSS：

#navCategories { position: relative; background: #006bb2; width: 1131px; margin-left: auto; margin-right: auto; height: 65px; border-top-right-radius: 5px; border-top-left-radius: 5px; box-shadow: 0px 0px 3px #999 !important;  }
#navSpacer { border-top: 0px solid #b7ccdb; border-bottom: 0px solid #fff; margin-top: 20px; }
#nav { margin-left: 10px; }
#nav ul, #nav ul ul { z-index: 10; width: 1131px; }
#nav ul { list-style-type: none; margin: 0px; margin-top: 10px; padding: 0px; position: absolute; }
#nav ul div { border: 1px solid #999; border-top: 0px; visibility: hidden; width: 100%; height: 170px; padding: 10px; top: 55px; position: absolute; left: -10px; background: #fff; box-sizing: border-box; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
#nav ul ul { visibility: hidden; display: block; position: relative; float: left; background: #fff; width: 20%; padding: 0px; margin: 0px; }
#nav ul ul li { float: none; margin-right: 0px;  }
#nav ul .nav-blocks { width: auto; }
#nav ul .nav-blocks li { float: left; margin-right: 0px; }
#nav ul .nav-blocks li a { height: 150px; width: 180px; display: block; padding: 0px; font-size: 17px !important; background-position: 50% 40% !important; background-repeat: no-repeat !important; position: relative; }
#nav ul .nav-blocks li a span { position: absolute; bottom: 15px; width: 180px; left: 0px; text-indent: 0px; height: 20px; line-height: 20px; text-align: center; }
#nav ul .nav-blocks li a:hover { }
#nav ul ul li a { height: 35px; color: #444 !important; line-height: 35px; padding-left: 20px; padding-right: 20px; border-radius: 5px; }
#nav ul ul li a:link,#nav ul ul li a:visited { font-size: 14px; color: #ccc; text-transform: none; }
#nav ul ul li a:hover,#nav ul ul li a:active { color: #fff; background-color: #e2f3ff !important; }

/* Transition-delay */
#nav > ul > li > a,#nav > ul > li,#nav > ul > li div,#nav > ul > li ul,#nav > ul > li:hover  > a,#nav > ul > li:hover div,#nav > ul > li:hover ul  { transition-delay: 0.1s; }

#nav > ul > li:hover  > a { color: #000 !important; background: #fff; }
#nav > ul > li:hover div { visibility: visible; }
#nav > ul > li:hover ul { visibility: visible; }
#nav ul li { float: left; margin: 0px; }
#nav ul li a { display: block; padding: 0px 20px; height: 55px; line-height: 45px; border-top-right-radius: 5px; border-top-left-radius: 5px; color: #fff !important;  }
#nav ul .nav-list li a { border-radius: 0px; padding: 0px; margin: 0px; text-indent: 25px; font-size: 17px !important; height: 50px; line-height: 50px; background: url("../img/navigation/arrow.png") no-repeat 10px 51% !important;  }
#nav ul .nav-list { padding-left: 15px; }
#nav ul .nav-list li { border-bottom: 1px solid #ddd; box-sizing: border-box; }
#nav ul .nav-list li:last-child { border-bottom: 0px; }
#nav ul li a:hover { background: #fff; color: #444 !important; }
相关问题
最新问题