css and javascript onmouseover type effect

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.

thejh · Accepted Answer · 2010-11-06 20:51:59Z

2

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."

answered Nov 6, 2010 at 20:51

thejh

45.7k18 gold badges100 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

linusthe3rd · Accepted Answer · 2010-11-07 18:36:39Z

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/

edited Nov 7, 2010 at 18:36

answered Nov 6, 2010 at 20:53

linusthe3rd

3,5863 gold badges30 silver badges43 bronze badges

2 Comments

Rahul Utb Over a year ago

ok, I understood this small code snippet u mentioned here. thanks... but can I use this when I make my menu(ans sub menu) bar using ul-li tags

linusthe3rd Over a year ago

yes, the :hover selector can be added to anything that can be included in a CSS selector. So something like: ul:hover li { visibility: visible; } is completely legal. I've also added a link to my original post that explains what all the pseudo selectors are.

Ole Melhus · Accepted Answer · 2010-11-06 20:39:46Z

0

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/

answered Nov 6, 2010 at 20:39

Ole Melhus

1,94912 silver badges17 bronze badges

1 Comment

thejh Over a year ago

Using JQuery for this wouldn't be very clean.

Collectives™ on Stack Overflow

css and javascript onmouseover type effect

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related