css和javascript onmouseover类型的效果

Question

When I visit some sites and take mouse pointer over some menu item, another sub menu items comes up in another panel adjacent to main menu item. Thus giving an effect like onmouseover. But when I see the source code (like View source option in IE) there is no onmouseover / onmouseout event defined in the menu item list element.

For example, in the website http://www.seoconsultants.com/ - take mouse pointer over SEO Search on the left panel or in the website http://www.znetindia.com take mouse pointer Email option on top menubar

How to get such effect using css and javascript.

Answer 1

Without JS, just with CSS. Take a look at the source code: 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;}

Basically you say: "When the mouse is hovering over a parent list element, the child list should be visible."

Answer 2

This is done through the use of the :hover CSS attribute attached to the CSS rule of the parent node.

Consider the following HTML code:

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

You achieve the effect you mention with the following css code:

.parent .hiddenLabel {
    visibility: hidden;
}

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

This basically tells the browser that when a mouse hover event occurs on the "parent" node, the nodes with the CSS class of "hiddenLabel" will appear to the user and disappear when the mouse moves off the node.

This is the best practice for achieving this effect because of the load time and processing required for the javascript to start running on the page is longer than CSS being loaded.

Here is a great write-up on pseudo selectors and what each of them do: http://css-tricks.com/pseudo-class-selectors/

Answer 3

Take a look at jQuery and some plugins. See this site for a list of jQuery dropdown plugins. http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/