css和javascript onmouseover類型效果

當我訪問某些網站並將鼠標指針放在某個菜單項上時，另一個子菜單項出現在與主菜單項相鄰的另一個面板中。從而給出了一個像小女孩一樣的效果。但是當我看到源代碼（如IE中的View source選項）時，菜單項列表元素中沒有定義onmouseover/onmouseout事件。css和javascript onmouseover類型效果

例如，在網站上http://www.seoconsultants.com/ - 以鼠標指針SEO搜索http://www.znetindia.com左側面板上或網站拿鼠標指針電子郵件頂級菜單欄上的選項

如何使用css和javascript獲得這樣的效果。

來源

2010-11-06 Rahul Utb

看看jQuery和一些插件。看到這個網站的jQuery下拉插件列表。 http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/

來源

2010-11-06 20:39:46

感謝，但我不想使用jquery – 2010-11-06 20:50:27

你應該，它會讓你的生活:-) – 2010-11-06 20:52:47

更好爲此使用JQuery不會很乾淨。 – thejh 2010-11-06 20:54:47

沒有JS，只用CSS。看看源代碼：http://www.seoconsultants.com/css/seo.css

/* Begin CSS Popout Menus at Left */ 
#menuleft ul li{position:relative;} 
#menuleft li ul{position:absolute;left:180px;top:0;display:none;padding:0;} 

div#menuleft ul li:hover ul{display:block;}

基本上你說：「當鼠標懸停在父列表元素，孩子名單應該是可見的。」

來源

2010-11-06 20:51:59 thejh

這是通過使用：附加到父節點的CSS規則的懸停CSS屬性完成的。

考慮下面的HTML代碼：

<div class="parent"> 
<span class="label">Always on!</span> 
<span class="hiddenLabel">Show on Mouse</span> 
</div>

你實現你用下面的CSS代碼提效果：

.parent .hiddenLabel { 
    visibility: hidden; 
} 

.parent:hover .hiddenLabel { 
    visibility: visible; 
}

這基本上告訴瀏覽器，當鼠標懸停事件的發生「父」節點，CSS類爲「hiddenLabel」的節點將出現給用戶，並且在鼠標離開節點時消失。

這是實現這種效果的最佳實踐，因爲加載時間和處理JavaScript所需的開始在頁面上運行比加載的CSS更長。

這裏是僞選擇一個偉大的寫了和他們每個人做：http://css-tricks.com/pseudo-class-selectors/

來源

2010-11-06 20:53:16 linusthe3rd

好吧，我明白這裏提到的這個小代碼片段。謝謝......但是當我使用ul-li標籤製作我的菜單（ans子菜單）欄時，我可以使用這個嗎 – 2010-11-07 01:19:17

是的，可以將：hover選擇器添加到任何可以包含在CSS選擇器中的選項。例如： ul：hover li {visibility：visible; } 是完全合法的。我也添加了一個鏈接到我的原始文章，解釋所有的僞選擇器是什麼。 – linusthe3rd 2010-11-07 18:33:58

css和javascript onmouseover類型效果

回答

相關問題