AD
Related
< 記事共通の特徴 >
全デモのソース一式がダウンロード可能です。ソース一式はローカル環境ですぐに使える構成になっています。
ページ最上部へのスクロールボタンの作り方02
（ボタンの半透明化：hover時半透明）
ボタンの半透明化（ホバー時に半透化する）
解説
半透明化
半透明化はCSSで opacity を設定することで簡単に行えます。
ただ、急に半透過になるのは、デザインとして cool じゃないので、
じわじわと徐々に半透過していくように、transition もCSSに設定することが多いです。
opacity: 0.6;
※ 0.6は透過の割合です。1だと非透過。0だと見えなくなります。
ただ、急に半透過になるのは、デザインとして cool じゃないので、
じわじわと徐々に半透過していくように、transition もCSSに設定することが多いです。
transition: 0.6s;
※ 0.6sは変化にかける時間です。
※ 後述しますが、opacity と transition の記載する場所の違いには注意が必要です。
hover時の設定
hover時（ボタンの上にマウスのカーソルを重ねた時）の設定は、以下のように記載します。
ただ、「hover時にボタンを透過する設定」は使用する機会が多いため、
上記のようにボタン毎に設定を行うのではなく、汎用的に使用できるクラスを定義して使用する方が実用的です。
デモでも、(HTML側の)ボタン部分の記述に hoverクラスを追加するだけで、
そのボタンに対して「hover時にボタンを透過する設定」が適用されるようにしています。
#goto_page_top:hover {
/* hover時に適用するCSS設定 */
}
※ #goto_page_top 部分はボタンの id です。
ただ、「hover時にボタンを透過する設定」は使用する機会が多いため、
上記のようにボタン毎に設定を行うのではなく、汎用的に使用できるクラスを定義して使用する方が実用的です。
デモでも、(HTML側の)ボタン部分の記述に hoverクラスを追加するだけで、
そのボタンに対して「hover時にボタンを透過する設定」が適用されるようにしています。
<div id="goto_page_top" class="hover">↑</div>
.hover {
transition: 0.6s;
}
.hover:hover {
opacity: 0.6;
}
※ このクラス名 hover に特別な意味はありません。クラス名 abcdef 等でも何でも任意の名称が使用可能です。
※ :hover の部分は、hover時の処理を設定するための特別な記述です。
まとめ
上記ポイントをまとめると、下記のようなコードになります。
<html>
<head>
<!-- jQueryを使用するための記述等 -->
<!-- jQueryを使用するための記述等 -->
<style>
.hover {
transition: 0.6s;
}
.hover:hover {
opacity: 0.6;
}
</style>
</head>
<body>
<!-- HP内容 -->
<!-- HP内容 -->
<!-- HP内容 -->
<div id="goto_page_top" class="hover">↑</div>
<script>
<!-- スクロール処理等 -->
<!-- スクロール処理等 -->
</script>
</body>
</html>