CSS - desplazamiento entorno a sombras CSS efecto hover

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 03/11/2021 18:13:31

Hola, soy nuevo en este foro. Busco ayuda para hecer que el comportamiento de un texto con efecto hover con sombras no afecte al texto que hay a su derecha e izquierda. Si el texto con este efecto está en una tabla, las sombras al hacer hover hacen que se muevan el resto de las celdas situadas a la izquierda y derecha.

Quisiera mantener este efecto hover, pero me gustaría que tanto el texto a ambos lados como las celdas a ambos lados no se desplazen.

Las sombras al hace hover hacen que la caja css se haga más grande, eso quiero conservarlo porque de lo contrario al hacer hover el texto se haría pequeño y esa no es la intención.

El objetivo es hacer que los objetos y texto a ambos lados no se muevan, sin alterar el tamaño del texto ni de la sombra.

Es esto posible?

Yo aplico este efecto con una clase aplicada al body.

Les dejaría una página de pruebas de mi web con una tabla y un texto para que vean el comportamiento pero desconozco si se puede dejar aquí la url de la web propia.

Gracias por su atención. Un cordial saludo!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

desplazamiento entorno a sombras CSS efecto hover

Publicado por pablo (37 intervenciones) el 03/11/2021 18:21:39

Hola Juan Carlos puedes compartir el código del problema para probarlo también puedes subirlo a codepen para que la vista sea más fácil
https://codepen.io/

Saludos.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 03/11/2021 21:32:37

S Pablo, el código de la clase es el siguiente:

.post-body a:hover {

padding:0px;

padding-right: 2.5px;

background:#transparent;

box-shadow: 0px 0px 9px rgb(223, 223, 223);

border: solid 1px #dfdfdf;

border-radius: 5px 5px 5px 5px;

text-decoration: none !important;

-moz-transition: all .5s;

-webkit-transition: all .5s;

-o-transition: all .5s;

cursor:pointer;

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por pablo (37 intervenciones) el 03/11/2021 23:36:33

hola podrías poner el html también?

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 04/11/2021 08:33:57

Si Pablo, éste es el código del html:

<p><span style="color: white;"><b style="color: white;">rodea a la estrella <span style="color: #2bb3e6;"><i>BD-14 1294</i></span> de magnitud 10,62. A su lado, otra nebulosa de reflexión llamada <span style="color: #2bb3e6;"><i>GN 05.55.6</i></span> rodea a un pequeño grupo de estrellas. VdB 64 se encuentra a una distancia de unos 1.386 años luz del </b></span><span style="color: white;"><b style="color: white;"><i><b><span style="color: orange;"><a href="https://universomagicojuanca.blogspot.com/p/los-planetas-del-sistema-solar.html"><span style="color: #59e62b; font-family: inherit; font-size: 17px;">Sistema Solar</span></a></span></b></i>, por lo que llega a estar físicamente relacionada con el borde de la superburbuja conocida como <span style="color: #2bb3e6;"><i>Burbuja Eridanus</i></span>.</b></span></p><br />

<br />

<div style="text-align: center;">

<div style="opacity: 0.93; position: relative; right: -0.05%; top: 5px;">

<table border="5" bordercolor="#1a9bcb" cellpadding="4" style="margin: 0px auto; width: 100%;"><tbody>

<tr bgcolor="#297d9c"><td><span style="color: white;">Nombre</span></td>

<td><span style="color: white;">RA</span></td>

<td><span style="color: white;">DEC</span></td>

<td><span style="color: white;">Magnitud</span></td>

<td><span style="color: white;">Datos</span></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>NGC 7606 / LEDA 71047 / MCG-02-59-012 / PGC 71047 / SINGG HIPASS J2319-08<br />HIPASS J2319-08 / 6dFGS gJ231904.8-082906 / PSCz Q23164-0845 / IRAS 23164-0845<br />2MASX J23190480-0829065 / SDSS J231904.77-082906.3 / AGC 630172</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:19:04.805</i></span></td>

<td><span style="color: #2bb3e6;"><i>-08º 29' 06.50''</i></span></td>

<td><span style="color: #2bb3e6;"><i>B = 11.5</i></span></td>

<td><a href="http://simbad.cfa.harvard.edu/simbad/sim-basic?Ident=NGC+7606"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>SN 1965M / SN 1987N / AAVSO 2313-09</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:19:03.3</i></span></td>

<td><span style="color: #2bb3e6;"><i>-08º 28' 37''</i></span></td>

<td><span style="color: #2bb3e6;"><i></i></span><br /></td>

<td><a href="http://simbad.cfa.harvard.edu/simbad/sim-basic?Ident=SN+1965M"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>psi02 Aqr / 93 Aquarii / HD 219688 / HR 8858 / SAO 146620 / BD-09 6160</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:17:54.2137206</i></span></td>

<td><span style="color: #2bb3e6;"><i>-09º 10' 57.067524''</i></span></td>

<td><span style="color: #2bb3e6;"><i>V = 4.40</i></span></td>

<td><a href="http://simbad.cfa.harvard.edu/simbad/sim-basic?Ident=93+Aquarii"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

</tbody></table>

</div>

</div>

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 05/11/2021 08:27:42

Puede que no contesten porque no les funciona, es posible que así les funcione:

<p class="plastic"><span style="color: white;"><b style="color: white;">rodea a la estrella <span style="color: #2bb3e6;"><i>BD-14 1294</i></span> de magnitud 10,62. A su lado, otra nebulosa de reflexión llamada <span style="color: #2bb3e6;"><i>GN 05.55.6</i></span> rodea a un pequeño grupo de estrellas. VdB 64 se encuentra a una distancia de unos 1.386 años luz del </b></span><span style="color: white;"><b style="color: white;"><i><b><span style="color: orange;"><a href="https://"><span style="color: #59e62b; font-family: inherit; font-size: 17px;">Sistema Solar</span></a></span></b></i>, por lo que llega a estar físicamente relacionada con el borde de la superburbuja conocida como <span style="color: #2bb3e6;"><i>Burbuja Eridanus</i></span>.</b></span></p><br />

<br />

<div class="plastic" style="text-align: center;">

<div style="opacity: 0.93; position: relative; right: -0.05%; top: 5px;">

<table border="5" bordercolor="#1a9bcb" cellpadding="4" style="margin: 0px auto; width: 100%;"><tbody>

<tr bgcolor="#297d9c"><td><span style="color: white;">Nombre</span></td>

<td><span style="color: white;">RA</span></td>

<td><span style="color: white;">DEC</span></td>

<td><span style="color: white;">Magnitud</span></td>

<td><span style="color: white;">Datos</span></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>NGC 7606 / LEDA 71047 / MCG-02-59-012 / PGC 71047 / SINGG HIPASS J2319-08<br />HIPASS J2319-08 / 6dFGS gJ231904.8-082906 / PSCz Q23164-0845 / IRAS 23164-0845<br />2MASX J23190480-0829065 / SDSS J231904.77-082906.3 / AGC 630172</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:19:04.805</i></span></td>

<td><span style="color: #2bb3e6;"><i>-08º 29' 06.50''</i></span></td>

<td><span style="color: #2bb3e6;"><i>B = 11.5</i></span></td>

<td><a href="http://"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>SN 1965M / SN 1987N / AAVSO 2313-09</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:19:03.3</i></span></td>

<td><span style="color: #2bb3e6;"><i>-08º 28' 37''</i></span></td>

<td><span style="color: #2bb3e6;"><i></i></span><br /></td>

<td><a href="http://"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

<tr><td><span style="color: #2bb3e6;"><i>psi02 Aqr / 93 Aquarii / HD 219688 / HR 8858 / SAO 146620 / BD-09 6160</i></span></td>

<td><span style="color: #2bb3e6;"><i>23:17:54.2137206</i></span></td>

<td><span style="color: #2bb3e6;"><i>-09º 10' 57.067524''</i></span></td>

<td><span style="color: #2bb3e6;"><i>V = 4.40</i></span></td>

<td><a href="http://"><span style="color: #d28138;"><i>Simbad</i></span></a></td></tr>

</tbody></table>

</div>

</div>

<style>

.plastic a:hover {

padding:0px;

padding-right: 2.5px;

background:transparent;

box-shadow: 0px 0px 9px rgb(223, 223, 223);

border: solid 1px #dfdfdf;

border-radius: 5px 5px 5px 5px;

text-decoration: none !important;

-moz-transition: all .5s;

-webkit-transition: all .5s;

-o-transition: all .5s;

cursor:pointer;

.plastic a {

-moz-transition: all .5s;

-webkit-transition: all .5s;

-o-transition: all .5s;

</style>

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por pablo (37 intervenciones) el 06/11/2021 16:38:53

Hola juan disculpa la demora para responder el mensaje, mmm creo que puedes solucionarlo aplicandole a la table el table-layout es decir

table{

  table-layout: fixed;

Para que las columnas tengan un espacio en concreto y así el boton tenga libertad para hacer la animación que buscas.

Saludos.

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 07/11/2021 10:11:29

Hola Pablo, no importa la demora, gracias por contestar. Si, el tema de la tabla se ha solucionado. Sin embargo no funciona para el párrafo de texto, ¿hay alguna solución para el texto?
Un cordial saludo.

Valora esta respuesta

Comentar

desplazamiento entorno a sombras CSS efecto hover

Publicado por Juan Carlos (6 intervenciones) el 09/11/2021 11:00:23

Mientras espero que Pablo ó algún experto me conteste a si hay alguna solución para que no se desplaze el texto del párrafo alrededor del enlace, comentar que hay una solución mucho más fácil para que las tablas se queden fijas al hacer hover con ésta animación.

Mi solución es añadir un width="200" suponiendo que el ancho que queremos para la celda sea de 200 pixels, al <td> de la primera celda de la columna que contiene los enlaces, ya que todos los enlaces de esa columna respetarán el ancho declarado para la primera celda.

Quedaría así:

<table border="5" bordercolor="#006cff" cellpadding="4" style="margin: 0px auto; width: 100%;"><tbody>

<tr bgcolor="#5c83b8"><td><span style="color: #000;">Nombre</span></td>

<td><span style="color: #000;">RA</span></td>

<td><span style="color: #000;">DEC</span></td>

<td><span style="color: #000;">Magnitud</span></td>

<td width="70"><span style="color: #000;">Datos</span></td></tr>

<tr><td><span style="color: #003e92;"><i>Messier 42 / M 42 / NGC 1976 / Great Orion Nebula / LBN 974 / 3C 145<br />4C -05.21 / CTA 37 / GAL 209.01-19.4 / LBN 209.13-19.35 / Mills 05+0A<br />MSH 05-0-11 / NRL 6 / PKS 0532-054 / XSS J05351-0519</i></span></td>

<td><span style="color: #003e92;"><i>Ascension recta</i></span></td>

<td><span style="color: #003e92;"><i>Declinación</i></span></td>

<td><span style="color: #003e92;"><i>Magnitud</i></span><br /></td>

<td><a href="http://"><span style="color: #ff3b0f;"><i>Datos</i></span></a></td></tr>

<tr><td><span style="color: #003e92;"><i>Trapezium Cluster / tet01 Ori / Ass Ori OB 1d / BD-05 1315 / STF 748<br />ADS 4186 / C 0532-054 / CCDM J05353-0524 / 2E 1366 / 2E 0532.6-0526<br />1ES 0532-05.4 / 2MAXI J0535-052 / Ori Id / PBC J0535.1-0522<br />RX J0535.3-0523 / SWIFT J0535.3-0520 / WDS J05353-0523</i></span></td>

<td><span style="color: #003e92;"><i>Ascension recta</i></span></td>

<td><span style="color: #003e92;"><i>Declinación</i></span></td>

<td><span style="color: #003e92;"><i>Magnitud</i></span><br /></td>

<td><a href="http://"><span style="color: #ff3b0f;"><i>Datos</i></span></a></td></tr>

<tr><td><span style="color: #003e92;"><i>Theta Orionis / tet Ori</i></span></td>

<td><span style="color: #003e92;"><i>Ascension recta</i></span></td>

<td><span style="color: #003e92;"><i>Declinación</i></span></td>

<td><span style="color: #003e92;"><i>Magnitud</i></span><br /></td>

<td><a href="http://"><span style="color: #ff3b0f;"><i>Datos</i></span></a></td></tr>

<tr><td><span style="color: #003e92;"><i>Messier 43 / M 43 / Mairan's Nebula / NGC 1982 / GRS G208.90 -19.30 / RAFGL 779</i></span></td>

<td><span style="color: #003e92;"><i>Ascension recta</i></span></td>

<td><span style="color: #003e92;"><i>Declinación</i></span></td>

<td><span style="color: #003e92;"><i>Magnitud</i></span><br /></td>

<td><a href="http://"><span style="color: #ff3b0f;"><i>Datos</i></span></a></td></tr>

<tr><td><span style="color: #003e92;"><i>HD 37061</i></span></td>

<td><span style="color: #003e92;"><i>Ascension recta</i></span></td>

<td><span style="color: #003e92;"><i>Declinación</i></span></td>

<td><span style="color: #003e92;"><i>Magnitud</i></span></td>

<td><a href="http://"><span style="color: #ff3b0f;"><i>Datos</i></span></a></td></tr>

</tbody></table>

Espero que les sirva.
Si existe solución para el párrafo de texto porfavor háganmelo saber. Un cordial saludo.

Valora esta respuesta

Comentar

Quiero que la caja que esta dentro del hijo de la caja flex box sea tambien responsive. ¿Se puede? M

Mantener estilo botón CSS