html - ホバー時に要素をアニメーション化する方法

Question

ホバーしたときに要素を大きくする (そしてコンテンツのテキスト サイズを大きくする) にはどうすればよい<div>ですか? 私はそれらをクラスに入れて試しました：

size: 150%;

と

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

最初の試行はまったく機能せず、2 番目のコードは div のフラッシュを作成し、部分的に消えました。

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/

Answer 2

同様の問題に対して次のようなことを行いました（スケールを自分に合ったものに変更できます）：

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

これにより、divとそのコンテンツの両方がスケーリングされることに注意してください。これは、あなたが望むものだと思います。

Answer 3

CSS を使用して、ホバー スタイルを div に追加できます。

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

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

デモンストレーションについては、このjsFiddleを参照してください。

jQuery ソリューション

あなたのために働くかもしれない別のオプションはjQueryです。これは、このような一般的に必要な機能を簡素化する JavaScript ライブラリです。jQuery を使用すると、要素にホバー効果を簡単に追加できます。

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

デモンストレーションについては、このjsFiddleを参照してください。