日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月28日水曜日

Blogger:ページの右下に常に表示されるナビゲーションにマウスが乗ったら光るようなエフェクトを設定

イントロダクション

前回の記事「Blogger:ページの右下に常に表示されるナビゲーションへ「ラベル」への移動リンクを追加」では、リンクをクリックするだけでページ内のラベルへ移動できるナビゲーションを、ページの右下に常に表示するようにしました。

今回はそのナビゲーションを改良し、ナビゲーションの上にマウスが乗ったら光っているように見えるエフェクトを設定します。


コード


そのため、改良した個所のコードのみ記載します。

スタイルシートの変更

スタイルシートを、Bloggerのテンプレートのカスタマイズから、上級者向け→CSSを追加にて以下のように修正します。
#page-navi {
position:fixed;
bottom:10px;
margin-left:1130px;
width:140px;
background-color:#eeeeee;
text-align:center;
padding:8px;
}

#page-navi:hover {
background-color:#ffffff;
box-shadow:0px 0px 20px 4px #ffffff;
}

:hover にて、マウスが乗った時の効果を設定しています。
マウスが乗った時に、要素の背景色を真っ白にして、かつ白い影を表示するようにしています。

結果

以下のように、ページの右下のナビゲーションにマウスが乗ると、光っているように見えるようになりました。

通常時
マウスが乗った時 
マウスが乗っているとき






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...