Pythonメモ torinaブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

CSS、ホバー時(:hover)をお洒落に(transition)

プログラミング関連 お洒落
約396日前 2016年2月28日2:40

このブログのリンクです。これはaタグのホバー時の挙動を変更したものです
aタグにマウスカーソルを合わせると、色がちょっとアニメーションしながら変わります

CSSは以下のとおり
a {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

a:hover {
    color: #DCDCDC;
}


これはaタグにカーソルが合うと、0.3秒かけて滑らかに色が変わります
allと指定していますが、個別にbackground-colorやbackground-imageなどを指定できます


このブログの続きを読むボタンのホバー時ですが、カーソルが合うと横から小さい画像が中央に入ってきます。
これは以下のCSSで実装されています
a {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

a:hover {
    color: #DCDCDC;
}

a.btn:hover {
    background-image: url("../img/python.png");
    background-repeat: no-repeat;
    background-position: center;
    color: #000;
    background-color: #fff;
}


Bootstrapのa class="btn"を使っていますので、a.btnでの指定をしています
また、aタグには既に
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;

と指定しているので、a.btn:hoverには改めて transition: all .3s ease;等の指定は必要ないです

例えば、下記の書き方では通常リンクの色は変わりますが、画像が中央に入ってこなくなります(colorのみです)
a {
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

a:hover {
    color: #DCDCDC;
}

a.btn:hover {
    background-image: url("../img/python.png");
    background-repeat: no-repeat;
    background-position: center;
    color: #000;
    background-color: #fff;
}

aタグ等の親となる要素にallと指定しておくと、a.btn やa.class での指定が楽になるかもしれません



参考
http://h2ham.seesaa.net/article/182989666.html