Mostrar bordes table onMouseover

neb642 · #1 (**permalink**) 28/02/2011, 19:55

Bueno necesito lograr basicamente que onmouseover mostrar los bordes superior e inferior de la celda en la cual este situado el cursor (valga la redundancia)

He hecho:

Cita:

.tablaselv {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.tablaselv:hover {
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
}

Cita:

<table width="175" border="0">
<tr>
<td class="tablaselv">prueba</td>
</tr>
<tr>
<td class="tablaselv">loca</td>
</tr>
</table>

aclaro que el fondo de la página es blanco. Saludos

sanxuan · #2 (**permalink**) 01/03/2011, 15:46

Si no funciona puede que no hayas definido el tipo de documento con la etiqueta DOCTYPE.
Usándola tu código funciona sin cambiar nada.

cronosmen · #3 (**permalink**) 02/03/2011, 08:06

estoy con sanxuan, deberia funcionar perfectamente, un consejo a modo de optimización de código:

Esto :

Código CSS:

Ver original.tablasel {
border:1px solid #FFFFFF;
}
 
.tablaselv:hover {
border:0;
border-top:1px solid #FF0000;
border-bottom:1px solid #FF0000;;
}

Esto tan reducido hace lo mismo que tu código pero como ves se ahorra muchas lineas de css