Problemas con el borde CSS cuando se usa: hover en el tr

Estoy tratando de resaltar la fila en la que está el mouse en una tabla de datos. Estoy tratando de hacer esto con un límite superior y un límite inferior. Para ayudar a la legibilidad también tengo un png transparente y claro en filas alternativas.Problemas con el borde CSS cuando se usa: hover en el tr

Parece que cuando enciendo y apago los bordes (funciona en IE8 + y FF) las filas brincan un poco. Creo que puedo solucionarlo teniendo un borde transparente sin desplazamiento, en lugar de ninguno. ¿Es este x-browser compatible ahora?

En Chrome, el borde resaltado de la fila no desaparece al mover el mouse fuera de la fila, ¿por qué?

http://justinzaun.com/Tree/people/

Actualización: he fijado el problema fronterizo en cromo en las que no se irían. Moví el borde a los TDs en lugar del TR. Las filas todavía están saltando alrededor.

Gracias!

Fuente

2011-07-26 Justin808

En Chrome (para mí) el borde desaparece cuando me muevo hacia abajo, pero no cuando muevo hacia arriba en la página. – MrWhite

@ w3d - He resuelto ese problema, solo el problema de las filas moviéndose alrededor – Justin808

ponga un borde transparente en sus elementos de estado normal.

Cuando se aplica :hover, el tamaño del borde cambia el tamaño que ocupa el elemento.

por ejemplo:

.myelement 
{ 
     border:4px solid transparent; 
} 

.myelement:hover 
{ 
    border: 4px solid green; 
}

http://jsfiddle.net/mPmRA/

EDIT: - más específicamente a su mesa (ugh: mesas ... colapse frontera hace que lo anterior no funcione correctamente)

http://jsfiddle.net/mPmRA/1/

ponga el tr frontera ansperant en el tr

tr 
{ 
    border-top:4px solid transparent; 
    border-bottom:4px solid transparent; 
}

Y para el vuelo estacionario hacer algo como:

tr:hover td 
{ 
    border-top:4px solid green; 
    border-bottom:4px solid green; 
}

Las fronteras td A continuación, aparecerá por encima de la frontera de la fila.

Fuente

2011-07-27 07:00:49

Una manera más fácil es agregar "margin-top: -1px; margin-bottom: -1px;" al: estilo de desplazamiento, esto corrige la nueva altura con el borde.

Fuente

2011-07-26 18:46:27 Wulf

Hola Wulf, he actualizado el CSS para incluir los márgenes negativos, sin embargo, las filas siguen saltando. – Justin808

O bien, puede agregar relleno al estilo predeterminado y quitárselo en el estilo ': hover' cuando agrega los bordes? – MrWhite

+1 Gran llamada, esto es mejor que tratar de admitir la transparencia IE8 cuando se trata de menús desplegables que agregan bordes –

Asegúrate de que el borde esté en el INTERIOR en lugar del exterior. Desafortunadamente, la opción de insertar bordes no es aún parte de CSS. Aquí hay un poco de CSS para hacer las fronteras dentro del elemento usando sombras de la caja:

.mytable tr:hover { 
    -moz-box-shadow: inset 0 0 1px #000; 
}

que hará una frontera 1px negro en el interior de su elemento! : D Espero que esto ayude, si está configurado en un borde negro con puntos, su única opción es establecer el posicionamiento absoluto, y colocar cada fila de la tabla individualmente, lo que es un dolor en el trasero. :/ Si tiene un posicionamiento relativo o estático, los elementos se moverán cuando otros aumenten de tamaño. La idea de Wulf puede funcionar con un poco de configuración, pero para ser honesto, la sombra de la caja es un borde mucho más agradable que el punteado. (un poco hortera si lo digo yo mismo.^_^Lo siento)

Fuente

2011-07-27 06:55:03 alt

Problemas con el borde CSS cuando se usa: hover en el tr

Respuesta

Cuestiones relacionadas