1

Tengo una lista con DATATABLE para mostrar información de solicitudes ingresadas por el usuario. En esta lista existe la columna estado solicitud, y es aquí en donde estoy intentando realizar que cuando el usuario posicione el mouse sobre el estado de la solicitud se despliegue una imagen flotante al lado izquierdo del estado. Mi problema es que no logro posicionar la imagen de manera flotante y lo que hace es agrandar el alto y ancho de la fila. Comparto mi código e imágenes que muestran mi problema.

CSS

 .list{
   display: inline-block;
 }

.list img {
   float: left;
   display: none;
   width: 200px;
   height: 200px;
 }

.list:hover img { 
   display: block;
 }

**** FILA DATATABLE QUE MUESTRA NOMBRE ESTADO****

 return "<div class='list'>
           <span>"+data['estado']+"<img src='img.png'>
           </span>
         </div>"

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

0

1 respuesta 1

2

Para hacer flotante la imágen usa la propiedad de position.

Para el elemento padre de la imagen como: relative

Y para el elemento hijo como: absolute.

Te quedaría algo tal que así:

.list{
   display: inline-block;
 }

.list:hover img { 
   display: block;
 }
 
 .list > span{
   position: relative;
 }
 
.list img {
   position: absolute;
   /*float: left;*/
   display: none;
   width: 200px;
   height: 200px;
   /* Ajusta acorde tus necesidades */
   right: -200px; 
   bottom: -200px;
 }
<div class='list'>
  <span>Creado
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmQIOisJDMU0qTF4mka1q9fbzV2smNk1RYNA&s'>
  </span>
</div>

3
  • Muchas gracias, me funcionó según lo que necesitaba.
    – SBK22
    Commented el 25 sept. a las 14:50
  • Estaba revisando que al ir mostrando la imagen por los diferentes estados hacia abajo, cuando llego a los últimos la imagen se pierde debido a la posición en la que se ajustó la imagen. Es posible que se ajuste la imagen en relación al estado, es decir, si el estado esta arriba la imagen se ajusta a eso, y si el estado está abajo la imagen se ajusta a esto para que se visualice correctamente.
    – SBK22
    Commented el 25 sept. a las 15:05
  • 2
    Sí pero tendrías que añadir validaciones, lo que usaría yo es nth-child() para identificar cuando está abajo de la tabla y cuando no.
    – PsychoMx
    Commented el 25 sept. a las 15:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.