Table Row Box-Shadow on Hover (Webkit)

¿Esto es posible?Table Row Box-Shadow on Hover (Webkit)

Mi código funciona en Firefox. También puedo conseguir webkit para cambiar otras propiedades (por ejemplo, color de fondo, etc.) en vuelo estacionario, pero la sombra cuadro no entra en vigor:

tr:hover { 
    -webkit-box-shadow: 0px 2px 4px #e06547; 
    -moz-box-shadow: 0px 2px 4px #e06547; 
    box-shadow: 0px 2px 4px #e06547; 
    background-color: #d4d5d6; 
}

Fuente

2011-05-12 Anthony C

Encuentro que los estilos en 'tr' no tienen el mejor soporte. – alex

como respondida aquí: https://stackoverflow.com/a/11002077/1106393 en lugar de labrar tr debe aplicar estilo al -elemento td en combinación con las clases seudo :first-child y :last-child. Prepending tr:hover va a hacer el truco para usted:

tr:hover td { 
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:first-child { 
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:last-child { 
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
}

Demo 1 con la inserción: http://jsfiddle.net/Kk6Th/

Actualización:
Demo 2 sin inserción (clásico gota de sombra): http://jsfiddle.net/2nw4t/1/
Demostración 3 sin inserción (efecto de brillo): http://jsfiddle.net/2CSuM/

Fuente

2012-06-12 18:00:59 AvL

... Pero, solo funciona para 'recuadro'. [Mismo violín sin 'inserción' en las sombras] (http://jsfiddle.net/2nw4t/) –

Funciona sin 'recuadro': [violín] (http://jsfiddle.net/2nw4t/1/) Es solo la cuarta propiedad en box-shadow (anteriormente '-3px') que no se ve bien. Cámbielo a '0' ... – AvL

¡Bien, de hecho hizo que se vea bien, +1! Todavía es una lástima que no pueda usar eso, porque mis células son transparentes (y solo quería un efecto de "brillo"). Mi solución: superponer una lista (en este caso, un '

-2

Añadir esta

tr { 
    display: block; 
}

Por alguna razón Webkit necesita saber explícitamente que el elemento es un elemento de bloque para mostrar un cuadro sombreado.

Fuente

2011-06-30 19:04:36 ramono

Esto funciona PERO ... la fila de la tabla (naturalmente) comienza a actuar como un elemento de bloque normal. Entonces el espaciado automático, colspan, etc. se pierde. Hubiera sido agradable si pudiéramos tener nuestro pastel y comérselo también. –

a los navegadores no les gusta eso, sin embargo ... – DM8

Esto me pasó a mí y puse un pequeño radio de borde en él, y funciona.

border-radius: 1px;

Dependiendo del estilo que esté tratando de lograr, podría tratarse de un truco que puede usar.

Fuente

2012-05-28 20:08:15 Kenny

Probado y no funciona. Además, border-radius no tiene ningún efecto en las filas de la tabla, incluso si lo desea (al menos en Webkit, que es el problema). –

La solución de AvL es muy buena, gracias por la sugerencia. Aunque si como yo desea que el box-shadow (inset) en todo el tr, no sólo un lado, este código debe ayudarle a:

tr:hover td { 
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:first-child { 
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
} 
tr:hover td:last-child { 
    -webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset; 
}

Fuente

2014-10-03 01:42:47 Fanch

estoy frente a este problema y me encontré con algunas soluciones:

Agregar sombra en todos td.
Conjunto display: block en tr.
Use correctamente el estilo td:first-child:before.
Agregue la sombra a todos td y cubra las piezas que no necesitamos.

Puede verlos en este jsFiddle: https://jsfiddle.net/maskl/cxscmvpr/3/

Fuente

2016-04-22 13:15:22 Marek

Uso transformar escala (1,1) propiedad con box-shadow se va a resolver el problema.

tr:hover { 
    transform: scale(1); 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); 
}

violín: https://jsfiddle.net/ampicx/5p91xr48/

Gracias !!

Fuente

2017-12-27 17:03:21

Table Row Box-Shadow on Hover (Webkit)

Respuesta

Cuestiones relacionadas