0

Este bloque morado tiene un efecto de transición para que cuando ponga el cursor encima (hover), este se mueva a la derecha.

introducir la descripción de la imagen aquí

Aquí está el efecto hover: el bloque se hace rojo y se mueve a la derecha.

introducir la descripción de la imagen aquí

El problema es que la transición está fallando y el bloque se regresa a su posición de origen y no se queda a la derecha. Yo quiero que el bloque se quede del lado derecho y que este se quede ahí de color rojo y que no se vuelva a regresar. ¿Qué tengo que hacer para solucionar este problema?

Aquí están los códigos en HTML y CSS:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#cuerpo{
  height: 190px;
}

.contenedor{
  display: block;
  background: purple;
  width: 150px;
  height: 300px;

  position: absolute;
  padding: 5px;
  transform: translateX(-100px);
  margin-left: 400px;
  margin-top: 100px;

  opacity: 1;
  transition: all 400ms;
} 

.contenedor:hover {
  opacity: 1;
  transform: translateX(300px);
  background: red;
  position: relative;
}
<!DOCTYPE html>
<html lang="es">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
      <title> EJERCICIO 9 TRANSITION </title>
  </head>

  <body>
    <div id="cuerpo">

      <div class="contenedor">
        <p>frase</p>
      </div> 

    </div>
  </body>

</html>

2
  • 1
    Hover es algo que ocurre mientras el ratón pasa por encima de un elemento, pero al salir el ratón de él, el elemento regresa a su estado natural. Por lo mismo, lo que describes no puede lograrse únicamente con un efecto hover. Se necesitaría, por ejemplo, cambiarle de clase, para que quede asï después de salir el mouse de él y eso ya no puedes hacerlo solo con HTML y CSS.
    – jachguate
    Commented el 21 jun. 2023 a las 3:07
  • muchas gracias por tu respuesta Commented el 21 jun. 2023 a las 3:12

1 respuesta 1

0

lo puedes solucionar usando javascript, te proporciono el código

// JavaScript
const contenedor = document.querySelector('.contenedor');

contenedor.addEventListener('mouseover', () => {
  contenedor.style.transform = 'translateX(300px)';
  contenedor.style.backgroundColor = 'red';
});

Con CSS es imposible lograr el efecto que tu quieres, ya que el hover en css trabaja de esa manera ("siempre regresa a su posición original").

Pero con Javascript puedes lograrlo con el -> listener "mouseover".

Es más, te voy a proporcionar el siguiente código que va hacer que el elemento regrese a su posición original para que puedas diferenciar como funcionan los "listeners".

contenedor.addEventListener('mouseout', () => {
  contenedor.style.transform = 'translateX(-100px)';
  contenedor.style.backgroundColor = 'purple';
});

Si no llegas a colocar el útlimo fragmento de código que te proporcioné, el elemento se quedará a la derecha.

4
  • 1
    amigo muchas gracias. agradezco tu respuesta. lo tomare en cuenta. todavia no se JavaScript Commented el 21 jun. 2023 a las 2:38
  • @cesarHerrera te invito a que coloques el código en tu proyecto para que puedas verificar el efecto que quieres lograr Commented el 21 jun. 2023 a las 2:45
  • @cesarHerrera si te funciono la respuesta, por favor no olvides darle clic al botón de respuesta (tiene forma de check). Commented el 21 jun. 2023 a las 2:46
  • otra vez gracias solo que todavia no se js y no se como ponerlo de todos modos gracias Commented el 21 jun. 2023 a las 2:48

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.