Skip to main content
se añadieron 489 caracteres en el cuerpo
Origen Enlace

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 lograr el efecto que quiereslograrlo 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.

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.

Pero con Javascript puedes lograr el efecto que quieres con listener "mouseover".

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.

Origen Enlace

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.

Pero con Javascript puedes lograr el efecto que quieres con listener "mouseover".