Question

How can I make my <div> elements grow (以及 the content changes text size to a higher one), when hovered over? I put them in a class 以及 tried:

size: 150%;

以及

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

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

Answer 1

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/"rel=“nofollow> http://jsfiddle.net/MrdvW/。

Answer 2

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.

Answer 3

借助社保局,你可以在四处添加一 style:

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

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

See this jsFiddle for a show.

http://www.ohchr.org。

可为您工作的另一个选择是jQuery 。它拥有一个简明文图书馆,简化了诸如此等通常需要的功能。借助 j,你可以轻松地把 h效应添加到:

//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 show.

友情链接