Crear un menú en el que cambie el fondo de la celda al pasar el ratón

[Buitrako]

Buenas.

La cuestión es que me gustaría crear un menú en el que pasase el ratón por encima y el fondo de la celda de la tabla cambiase de color. ¿Cómo se podría hacer esto? He buscado por la página, pero hay tanta info que me he quedao loco.

¿Alguien me puede echar un cable?

Gracias.

[izar]

Creo que esto te puede servir como orientacion (aunque hay cosas q no estan bien echas, pero ahorita no tengo tiempo de depurar, hice un Ctrl+c -> Ctrl+v) hay mezclado css y etiquetas html q pueden hacerse por css, pero para el efecto q buscas, está lo importante.

Código:

<STYLE TYPE="text/css">
TABLE {font -size:10 pt;font-weight:normal; color:white;font-family:verdana}
TD{height:7pt}
A:link{color:white;text-decoration:none}
A:visited{color:white;text-decoration:none}
A:hover{color:white;text-decoration:none}
</STYLE>

<TABLE align="left" width="15%" height="138" border= "2" cellspacing="0"  bgcolor="#A28C11" bordercolordark="#A28C11" bordercolorlight="#E6C71A">
        <TR> 
          <TD style="font-size:10pt;font-weight:bold;color:white"  WIDTH="15%" HEIGHT="22"  onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > 
            <a  href="index2.html">Inicio</a></font></TD>
        </TR>
        <TR> 
         <TD style="font-size:10pt;font-weight:bold;color:white" WIDTH="15%" HEIGHT="22"  bgColor="#E6C71A"           onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" >
            <a  href="descargas.html">Descargas</a></font></TD>
        </TR>
        <TR> 
          <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22"  onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" >
            <a  href="foro">foro</a></font></TD>
        </TR>
        <TR> 
          <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22" onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > <a href="chat">Chat</a></font></TD>
        </TR>
        <TR> 
        <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22" onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > <a href="acerca.html">Acerca</a></font></TD>
          </a>
        </TR>
      </TABLE>

suerte

[Buitrako]

Muchas gracias.

Eso exactamente es lo que quería.

Pero la idea era meterlo todo en la hoja de estilos.

¿Sería posible?

Un saludo.

[kemie]

aca hay un buen ejemplo:
http://css.maxdesign.com.au/listamatic/vertical10.htm

[Buitrako]

Esta me va perfecta. Ya he personalizado el menú, pero tengo un problemilla.

Meto el menú en una columna de una tabla de 120 de ancho. Luego hago que el contenedor tenga también 120 de ancho:

#navcontainer a{
display: block;
padding: 2px 2px 2px 5px;
border: 1px solid #333;
width: 120px;
height: 15px;
background-color: #FFE6E6;
background-image: url(boto1.gif);
}

El problema es el siguiente: en Explorer se me ve perfecto, pero cuando visualizo con Firefox, se me sale de la tabla (quiero decir, que hace que la tabla aumente de 120 de ancho).

He estado mirando y es debido al padding del navcontainer y a los bordes de 1 pixel que pongo. No tengo mucha idea de css, pero creo que Explorer y Firefox lo "interpretan diferente". Firefox pone esos 120 más el padding y los bordes, y Explorer mete el padding y los bordes dentro de los 120 pixeles que tengo establecidos en la columna.

¿Hay alguna manera de hacer que se vea igual? ¿O kaka pa mi web?

Un saludo y seguid así.

[JavierB]

Hola Buitrako

Echa un ojo a este enlace que dejó kemie (¡hola! ) en otro mensaje:

http://www.disenorama.com/articulos/...o_de_cajas.htm

Saludos,

[Buitrako]

¡Muchas gracias Javier!

La verdad es que me ha parecido un enlace muy interesante. Ya tengo la página en favoritos...

Por simple curiosidad: ¿vosotros qué hacéis en estos casos?

¡Un saludo!