Skip to main content
El problema es en cuanto a la transición, no solo al hover; correcciones en redacción, ruido removido
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

No funciona el efecto hoverde transición

Hola a todos este es mi problema. Este bloque morado tiene un efecto hoverde transición para que cuando ponga el cursor encima (hover), este se muevemueva a la derecha.

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

El problema es que el efecto hover estala transición está fallando y el bloque se regresa a su posición de origen y el bloque 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. Por favor diganme, ¿que¿Qué tengo que hacer para solucionar este problema??

Muchas gracias a todos.

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>

No funciona el efecto hover

Hola a todos este es mi problema. Este bloque morado tiene un efecto hover para que cuando ponga el cursor, este se mueve a la derecha.

introducir la descripción de la imagen aquí

Aquí esta 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 el efecto hover esta fallando y el bloque se regresa a su posición de origen y el bloque 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. Por favor diganme, ¿que tengo que hacer para solucionar este problema??

Muchas gracias a todos.

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>

No funciona el efecto de transición

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>

Correcciones ortográficas y añadir código a snipet para poder ser ejecutado en el mismo navegador.
Origen Enlace

no No funciona el efecto hooverhover

Hola a todos este es mi problema. esteEste bloque morado tiene un efecto hooverhover para que cuando pongoponga el cursor, este se mueve a la derecha.

aquiAquí esta el efecto hooverhover el bloque se hace rojo y se mueve a la derecha.   

introducir la descripción de la imagen aquí

elEl problema es que el efecto hooverhover esta fallando y el bloque se regresa a su posicionposición de origen y elel bloque no se queda a la derecha. yoYo quiero que el bloque se quede del lado derecho y que este se quede ahiahí de color rojo y que no se vuelva a regresar. porPor favor diganme

que tenngo, ¿que tengo que hacer para solucionar este problema??

muchasMuchas gracias a todos.

aqui estanAquí están los codigoscódigos en htmlHTML y CSS:

    <!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>

aqui estan los codigos en 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>
*{
    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;
}
 

no funciona el efecto hoover

Hola a todos este es mi problema. este bloque morado tiene un efecto hoover que cuando pongo el cursor este se mueve a la derecha

aqui esta el efecto hoover el bloque se hace rojo y se mueve a la derecha.  introducir la descripción de la imagen aquí

el problema es que el efecto hoover esta fallando y el bloque se regresa a su posicion de origen y el bloque no se queda a la derecha. yo quiero que el bloque se quede del lado derecho y que este se quede ahi de color rojo y que no se vuelva a regresar. por favor diganme

que tenngo que hacer para solucionar este problema??

muchas gracias a todos.

aqui estan los codigos en html

    <!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>

aqui estan los codigos en 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;
}

No funciona el efecto hover

Hola a todos este es mi problema. Este bloque morado tiene un efecto hover para que cuando ponga el cursor, este se mueve a la derecha.

Aquí esta 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 el efecto hover esta fallando y el bloque se regresa a su posición de origen y el bloque 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. Por favor diganme, ¿que tengo que hacer para solucionar este problema??

Muchas gracias a todos.

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>
 

Origen Enlace

no funciona el efecto hoover

Hola a todos este es mi problema. este bloque morado tiene un efecto hoover que cuando pongo el cursor este se mueve a la derecha

introducir la descripción de la imagen aquí

aqui esta el efecto hoover el bloque se hace rojo y se mueve a la derecha. introducir la descripción de la imagen aquí

el problema es que el efecto hoover esta fallando y el bloque se regresa a su posicion de origen y el bloque no se queda a la derecha. yo quiero que el bloque se quede del lado derecho y que este se quede ahi de color rojo y que no se vuelva a regresar. por favor diganme

que tenngo que hacer para solucionar este problema??

muchas gracias a todos.

aqui estan los codigos en html

    <!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>

aqui estan los codigos en 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;
}