Tablas con Efecto Hover

>> //seccion/css/ -- 7 comentario /// Agregado el 2005-01-02 @ Por kaioken

Uff... pensando un poco me pregunte, ¿habra algunos mcusers que no sepan como hacer los hovers (cambio de colores) que hacen las tablas cuando se le crusa el mouse?

Uff... pensando un poco me pregunte, ¿habra algunos mcusers que no sepan como hacer los hovers (cambio de colores) que hacen las tablas cuando se le crusa el mouse?

Entonces, se prendio la el luz y listo un nuevo tutorial para los webmasters

En realidad hacer esto es super, ultra, mega, sencillo; lo que debes hacer es aplicar un simple código de cambio de estilo o cambio de color el borde al cruzar el mouse por arriba.

Sin Tabla:
Code:


 <DIV onmouseover="this.style.borderColor = '#B0B0B0';"  onmouseout="this.style.borderColor = '#EEEEEE';" style=" BORDER: #eeeeee 1px solid; align=justify>
 
 Aki va todo el texto que quieras, pero recuerda que esto no es una tabla
           
 </div>
 


Con Tabla:
Code:

 <table width='80%' onmouseover="this.style.borderColor = '#B0B0B0';"  onmouseout="this.style.borderColor = '#EEEEEE';" style=" BORDER: #eeeeee 1px solid; align='justify'>
    <tr>
      <td>
  contenido va aqui y ahora si es una tabla
      </td>
    </tr>
 </table>
 


Fijense que utilizo el onmouseover y el onmouseout (sin esto no funciona nada). Con este metodo pueden cambiar otras aspectos, no solo los bordes this.style.bordercolor pueden cambiar el background this.style.background, etc solo su imaginación los limitara.

Finito, simple y ahora pueden hacer efectos elegantes para sus páginas webs.

MC | #permalink 7 comentario