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

- wrapScroll: Desplazamiento automático de DIV’s con CSS
- Cambiar el formato de un campo Select con CSS
- Cómo quitar subrayado de los enlaces
- Barra de desplazamiento a la izquierda con CSS
- Menú rollover en CSS sin JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento