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

イントロダクション

前回の記事「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 にて、マウスが乗った時の効果を設定しています。
マウスが乗った時に、要素の背景色を真っ白にして、かつ白い影を表示するようにしています。

結果

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

通常時

↓

マウスが乗った時 

マウスが乗っているとき