miércoles, 3 de septiembre de 2014

Menú vertical que cambia al pasar el mouse, con CSS

 El siguiente es un ejemplo que encontré en internet (con algunas modificaciones propias), que muestra un menú con celdas verticales que cambian de color, tanto del font como del fondo, cuando pasamos el mouse sobre ellas.

 El siguiente es el código:


<html>
  <head>
    <style type="text/css"> 
      .menucolor{
        margin:2 0 2 0px;
        padding: 5px;
        border: 1px solid #204026;
        font-weight: bold;
        background-color: #BF915F;
      }
      .menucolor A{
        color: #666666;
        text-decoration: none;
        display: block;
      }
      .menucolor A:hover{
        background-color: #3F7F4C;
        color: #ffffcc;
      } 
    </style>
  </head>
  <body>
    <div class=navenlace><a href="#">enlace 1</a></div>  
    <div class=navenlace><a href="#">enlace 2</a></div>
    <div class=navenlace><a href="#">enlace 3</a></div>
  </body>
</html>


 Y este el resultado:






No hay comentarios:

Publicar un comentario