How to animate an element on hover

问题:

How can I make my

elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried:

size: 150%; 

and

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

the first try didn't work at all, and the second code just made the div's flash and dissappear partially.

回答1:

CSS3 solution:

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

     
Im content
 

http://jsfiddle.net/MrdvW/

回答2:

Using CSS you can add a hover style to the div:

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

See this jsFiddle for a demonstration.

jQuery Solution

Another option that might work for you is jQuery. It's a JavaScript library that simplifies commonly needed functionality such as this. Using jQuery, you can easily add hover effects to the elements:

//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);     } ); 

See this jsFiddle for a demonstration.

回答3:

I did something like this for a similar problem (you can change the scale to whatever works for you):

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

Note that this will scale both the div and its content, which I think is what you want.

文章来源: How to animate an element on hover