4

¿Cómo puedo hacer para poder pasar el puntero por un texto en especifico y él aumente de tamaño? Lo e logrado hacer con las imágenes pero con el texto no.

Este es mi código

<div class="Regresar"> 
  <SPAN style="position: absolute; top:300px; left:580px"> 
     <h4><a href="index.html">Regresar</a></h4> 
  </SPAN>

a:hover { color:green; transform: scale(1.15); transition: all 0.5s; } 
1
  • Excelente si me funciono, muchisimas gracias
    – user130448
    Commented el 30 may. 2019 a las 1:09

4 respuestas 4

8

Puedes hacerlo cambiado su propiedad font-size:

ejemplo:

a { transition: all 0.5s;}
a:hover { color:green; font-size:40px;  } 
<div class="Regresar"> 
  <SPAN style=""> 
     <h4><a href="index.html">Regresar</a></h4> 
  </SPAN>

1
  • 2
    Normalmente aplicas la transición al elemento, en este caso a{transition: all 0.5s}; De esta manera tienes una transición cuando entras y cuando sales. Si lo aplicas al a:hover tendrás una transición solo a la entrada, y un cambio brusco a la salida
    – enxaneta
    Commented el 31 may. 2019 a las 22:02
3

Esto ocurre porque los algunos elementos inline no pueden tener transformaciones, como se especifica en el estándar HTML para la definición de transform (traducción mía):

Elemento transformable

Un elemento transformable es un elemento en una de estas dos categorías:

  • Todos los elementos cuyo diseño está gobernado por el modelo de caja de CSS con la excepción de elementos no reemplazables de tipo inline, table-column y table-column-group,

  • Todos los elementos pintados de SVG, el elemento clipPath y lo elementos de SVG renderizables con la excepción de cualquier descendiente de elementos de texto.

Estás intentado aplicar un transform a un elemento a que es inline por defecto y por lo tanto no transformable. Añádele un display: inline-block para que se muestre en línea pero como bloque y de ese modo ya será transformable:

a:hover {
  color: green;
  transition: all 0.5s;
  transform: scale(1.15);
  display: inline-block;
}
<div class="Regresar">
  <span style="position: absolute; top:300px; left:580px"> 
     <h4><a href="index.html">Regresar</a></h4> 
  </span>
</div>

0

Para poder agrandar al texto REGRESAR debes aplicar el hover a la etiqueta <h4></h4> y no a la etiqueta de ancla a

De este modo en el CSS:

    h4:hover{
      transform: scaleX(3);
      transform: scaleY(3);
      transition: all 2s;
    }

De este modo en el HTML:

<div class="Regresar"> 
  <span> 
    <h4><a href="index.html">Regresar</a></h4> 
  </span>
</div>

Aplicamos un aumento del triple del valor original tanto para el eje X como para el eje Y; recordando que scale() trabaja en 2 dimensiones.

Con un resultado final como este:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        h4:hover{
          transform: scaleX(3);
          transform: scaleY(3);
          transition: all 2s;
        }
      </style>
    </head>
    <body>
    <div class="Regresar"> 
      <span> 
        <h4><a href="index.html">Regresar</a></h4> 
      </span>
      </div>
    </body>
    </html>

0

In the class put the transition and in the hover class put the change font, color, etc. No more that this =)

.myClass{transition: all 0.57;} .myClass:hover{font-size: all 0.57;}

2
  • 1
    Buen día, estás en SO en español, por favor, traduce tu pregunta, saludos. Commented el 24 feb. 2023 a las 1:25
  • Hola Joel, mira como responder para evitar votos negativos y/o que tu repuesta sea eliminada.Aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla! Cuando respondas al comentario de alguien, escribe "@nombreDelQueComento", para que este sea notificado. Commented el 24 feb. 2023 a las 2:09

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.