Give the element a background-image, Then absolute position a span element within the div. Then you just need to set the opacity of the span element to 0, and animate the opacity on span:hover.

The class, "activeDDParent", needs css that will cause the parent to have the same hover effect it has when the mouse hovers over it. This class allows for the out-of-the-box sharepoint rollof delay.

keeps hover states on for top level dropdown menu items or accordions

Will fade in and fade out on hover of element

When you hover over the “message” div, the “controls” div inside it will appear, along with all of its content, giving you the same functionality as used by the Twitter web app.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div.> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the IE6-specific source inside the head section of your code.

This is the javascript code that enables you to create hover effects also in IE6. It's clean, it's light, it's super! :)

Apply that code to your document (eg. in ) and in css add like this:

ul li:hover, ul li.shover { your css styles }

Explain: IE6 will on mouse over element add .shover to that element.

This would make IE treat the hover element in whichever tag you implemented.

Tomado de Sofá Naranja (http://sofanaranja.com)

La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hover”, y definimos en otra clase “hoverclass” los atributos del estado hover.

A pesar de que en el código se usa una variable llamada ‘div’, funciona con cualquier elemento de la página…

Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.

Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar” el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).

utiliza prototype.js --> http://prototype.conio.net (http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/)

La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hover”, y definimos en otra clase “hoverclass” los atributos del estado hover.

A pesar de que en el código se usa una variable llamada ‘div’, funciona con cualquier elemento de la página…

Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.

Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar” el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).