是否有可能輕鬆添加一個jQuery/JavaScript的鼠標懸停延遲CSS只下拉菜單？

是否有可能使用jquery或javascript例程向純css下拉菜單中添加一個mouseover延遲（以免在將鼠標移動到頁面上的另一個鏈接位置時引起用戶干擾）？是否有可能輕鬆添加一個jQuery/JavaScript的鼠標懸停延遲CSS只下拉菜單？

我在本網站和谷歌上搜索到的大多數材料都建議轉到jquery或javascript類型菜單。如果可能的話，我想留下一個純粹的CSS菜單，主要用於搜索引擎SEO的目的。

我已經嘗試添加一些jquery超時例程到我的'div'和頂級'UL'但無濟於事。

LINK的代碼：http://jsfiddle.net/2fc3W/1/

我的CSS是：

<style type="text/css"> 
.pipe {margin-top:4px;} 
.li_hover {color: #002398;} 
.bottom_li {margin-bottom:6px;margin-top:2px;} 
ul#nav li .bottom_li:hover > a{background:#E0E0E0;} 
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;} 
ul#nav li li:hover > a{border:none;} 
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/} 
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;} 
ul#nav li:hover > ul{display:block;} 
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;} 
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;} 
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;} 
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>} 
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;} 
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;} 
ul#nav ul li:hover ul{display: block;} 
</style>

我的HTML是：

<div id="menubar"> 
<ul id="nav"> 
<li><a href="/ueber_uns.htm">About Us</a> 
    <ul> 
    <li><a href="#">Who We Are</a></li> 
    <li><a href="#">Our Goals</a></li> 
    <li><a href="#">Our Team</a></li> 
    <li><a href="#">Press</a> 
    <ul> 
     <li><a href="#">2006</a></li> 
     <li><a href="#">2007</a></li> 
     <li><a href="#">2008</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Impressum</a></li> 
    <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li> 
    </ul> 
</li> 
<li class="pipe">|</li> 
<li><a href="/ueber_uns.htm">About Us</a> 
    <ul> 
    <li><a href="#">Who We Are</a></li> 
    <li><a href="#">Our Goals</a></li> 
    <li><a href="#">Our Team</a></li> 
    <li><a href="#">Press</a> 
    <ul> 
     <li><a href="#">2006</a></li> 
     <li><a href="#">2007</a></li> 
     <li><a href="#">2008</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Impressum</a></li> 
    <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li> 
    </ul> 
</li> 
<li class="pipe">|</li> 
<li><a href="/ueber_uns.htm">About Us</a> 
    <ul> 
    <li><a href="#">Who We Are</a></li> 
    <li><a href="#">Our Goals</a></li> 
    <li><a href="#">Our Team</a></li> 
    <li><a href="#">Press</a> 
    <ul> 
     <li><a href="#">2006</a></li> 
     <li><a href="#">2007</a></li> 
     <li><a href="#">2008</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Impressum</a></li> 
    <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li> 
    </ul> 
</li> 
</ul> 
</div>

感謝您指導我在正確的方向上沒有任何意見。

來源

2013-03-08 Rodney

我用jQuery的懸停意圖http://jsfiddle.net/tjfogarty/2fc3W/3/ – 2013-03-08 22:41:54

@TJFogarty真棒！這將工作。謝謝。 – Rodney 2013-03-08 22:50:31

@RustyJeans我編輯了標題抱歉。我的意思是，我的菜單目前不使用jquery/JavaScript它只是CSS。 – Rodney 2013-03-08 22:52:44

這裏的的JavaScript/jQuery的版本：http://jsfiddle.net/tjfogarty/2fc3W/3/

而CSS版本：http://jsfiddle.net/tjfogarty/2fc3W/4/

注意，我只是用-webkit-供應商前綴的動畫。同樣，你必須注意CSS動畫的瀏覽器兼容性。

-webkit-animation: showNav 0.4s forwards; 
-webkit-animation-delay: 0.5s;

來源

2013-03-08 22:55:15

我認爲其中之一會爲我工作。還有一個問題，我會在哪裏指定顏色和背景：以防止菜單出現在快速鼠標上更改？請注意，它現在如何改變最高級別，就像您有意將鼠標移到上面一樣。我嘗試將它添加到您添加的新行中，但這不起作用。謝謝。 – Rodney 2013-03-08 23:07:43

你的意思是這樣的？我不得不定義一個新的動畫。如果你打算依靠CSS3進行此操作，我還會包含對不受支持的瀏覽器的回退:) – 2013-03-08 23:18:43

是的，但請注意當鼠標懸停在媒體鏈接上時幻燈片發生了什麼？ – Rodney 2013-03-09 01:34:22

這是可能的，而不使用jQuery或Javascript，但你必須使用CSS3（或者針對特定瀏覽器CSS3樣的規則，例如-webkit，-MS等）。有一個站點可以從gui構建自己的這種菜單。我沒有使用過它（甚至下載它尚未），但他們的演示前一陣子吹我的腦海裏：

http://css3menu.com

其實很多網站現在：

https://www.google.com/search?q=css3+menu

來源

2013-03-08 22:57:13

是否有可能輕鬆添加一個jQuery/JavaScript的鼠標懸停延遲CSS只下拉菜單？

回答

相關問題