CSS3でマウスオーバーで要素変更したい場合は下記のように記述します。


index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>

<link href="stylesheet.css" rel="stylesheet"/>

</head>
<body>

<div id="sample">
<div id="scale">
<h1>sample</h1>
</div>
</div>

</body>
</html>


stylesheet.css


#sample {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#scale:hover {
transition: transform 2.0s;
transform: scale(3.0);
}


index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_007_02


要素にマウスオーバーすると要素が拡大されます。


要素を2秒で変更:


transition: transform 2.0s


要素を拡大:


transform: scale(3.0)





book


Q&A