dayjournal | CSS #007 – マウスオーバーで要素変更

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を実行すると下記のようにブラウザで表示されます。

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

要素を2秒で変更:


    transition: transform 2.0s

要素を拡大:


    transform: scale(3.0)

dayjournal memo

CSS #007 – マウスオーバーで要素変更

Yasunori Kirimoto 2015/9/19