Menú con efecto onmouseover con CSS

Menú con efecto onmouseover con CSS

¿Para qué utilizar javascript cuando la solución está en CSS?

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.

Código CSS

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}

Código HTML

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>

background-color de a.botonMenu: color de estado reposo (out).
background-color de a.botonMenu:hover: color de estado sobre (over).
background-color de a.botonMenu:active: color de estado seleccionado.

Autor: Federico Elgarte
http://www.proyectandoweb.com/

Usuarios que han visto este tema también han visto...

- Qué es CSS
- Menú rollover en CSS sin JavaScript
- Crear menus de navegación en CSS usando listas
- Trucos prácticos y técnicas para maquetar en CSS
- Capas visibles e invisibles en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento