Pregunta Cómo animar un elemento en vuelo estacionario


¿Cómo puedo hacer que mi <div> los elementos crecen (y el contenido cambia el tamaño del texto a uno más alto) cuando se pasa el mouse por encima? Los puse en una clase y probé:

size: 150%;

y

height: +30px;
width: +30px;

el primer intento no funcionó en absoluto, y el segundo código acaba de hacer que el div destelle y desaparezca parcialmente.


9
2018-04-04 19:23


origen


Respuestas:


Solución CSS3:

div {
    background: #999;
    width: 200px;
    height: 20px; 
    transition: width 1s;
}

div:hover{
    width: 300px;
}
<div>
    <p>Im content</p>
</div>

http://jsfiddle.net/MrdvW/


5
2018-04-04 19:52



Usando CSS puedes agregar un estilo de desplazamiento al div:

div.container {
    width: 80%;
    background-color: blue;
}

div.container:hover {
    width: 100%;
    background-color: red;
}

Mira esto jsFiddle para una demostración

Solución jQuery

Otra opción que podría funcionar para usted es jQuery. Es una biblioteca de JavaScript que simplifica la funcionalidad comúnmente necesaria como esta. Con jQuery, puede agregar fácilmente efectos de desplazamiento a los elementos:

//hover effect applies to any elements using the 'container' class
$(".container").hover(
    function(){ //mouse over
        $(this).width($(this).width() + 30);
    },
    function(){ //mouse out
        $(this).width($(this).width() - 30);
    }
);

Mira esto jsFiddle para una demostración


4
2018-04-04 19:27



Hice algo como esto por un problema similar (puede cambiar la escala a lo que funcione para usted):

div:hover {
 -webkit-transform: scale(1.1);
 -moz-transform:    scale(1.1);
 -o-transform:      scale(1.1);
 -ms-transform:     scale(1.1);
}

Tenga en cuenta que esto escalará tanto el div como su contenido, que creo que es lo que quiere.


4
2018-04-04 21:16