Geek Answers Handbook

Effect like css and javascript onmouseover

When I visit some sites and click on a menu item, other submenu items appear in another panel next to the main menu item. Thus, the effect acts as onmouseover. But when I see the source code (for example, the "View Source" option in IE), there is no onmouseover / onmouseout event in the menu item list item.

For example, on the website http://www.seoconsultants.com/ - hover over SEO Search in the left pane or on the website http://www.znetindia.com select the Email cursor in the top menu bar

How to get this effect using css and javascript.

+4
source share
3 answers

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 hovers over the parent list item, the list of child items should be visible."

+2
source

This is done using the CSS: hover 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 get the effect you mentioned with the following css code:

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

This basically tells the browser that when the “mouseover” event occurs on the “parent” node, nodes with the CSS class “hiddenLabel” will appear to the user and disappear when the mouse exits the node,

It is best practice to achieve this effect because of the loading and processing time required to run javascript on the page than loadable CSS.

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

+2
source

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

0
source

More articles:


All Articles