Foros del Web » Creando para Internet » CSS »

Mostrar bordes table onMouseover

Estas en el tema de Mostrar bordes table onMouseover en el foro de CSS en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 28/02/2011, 19:55
Avatar de neb642  
Fecha de Ingreso: noviembre-2010
Ubicación: Argentina
Mensajes: 29
Antigüedad: 7 años
Puntos: 3
Mostrar bordes table onMouseover

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
  #2 (permalink)  
Antiguo 01/03/2011, 15:46
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Mostrar bordes table onMouseover

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.
  #3 (permalink)  
Antiguo 02/03/2011, 08:06
 
Fecha de Ingreso: junio-2008
Mensajes: 165
Antigüedad: 9 años, 6 meses
Puntos: 6
Respuesta: Mostrar bordes table onMouseover

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

Esto :

Código CSS:
Ver original
  1. .tablasel {
  2. border:1px solid #FFFFFF;
  3. }
  4.  
  5. .tablaselv:hover {
  6. border:0;
  7. border-top:1px solid #FF0000;
  8. border-bottom:1px solid #FF0000;;
  9. }

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

Etiquetas: html, onmouseover, tablas, bordes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:17.