CSS | テキストをマウスホバーでふわっと表示する方法
CSSを使ってウスホバー時にテキストでふわっと表示させる簡単な方法を紹介しています。
マウスホバーでテキストをふわっと表示
See the Pen CSS | Gradation Text by yochans (@yochans) on CodePen.
HTMLには、マウスホバーの領域とする親要素クラス名「container」をdivタグで作成しています。
Pタグに直接、マウスホバー領域を付ける事も可能ですが、ホバー領域の高さが指定しにくかったりdisplayのnone/blockでの切り替えにしたかった際に領域が消えてしまったりと、実装時やカスタマイズ時の柔軟性を考えるとテキストに直接指定するのではなくコンテナ親要素を用意した方が良いかと思います。
<div class="container">
<p>Display Text In Hover</p>
</div>コンテナ部分の親要素には、横幅・高さを定義していませんがpaddingがあるのと内包するpタグが初期値でdisplay:blockなので横幅100％となっていますので未指定です。
サンプルではマウスホバー時のテキスト表示・非表示をcolorを使って変更していますが、もしdisplay要素を使う場合は非表示中はpタグの幅と高さが消えるので親要素のコンテナにサイズを指定して下さい。
ホバーの検出は親要素「container」で行われますが、ホバー時の変更は子要素のpタグに対して指定しています。transition（アニメーション時間）などは子要素のpタグに指定します。
.container {
padding: 30px;
background: #000;
}
.container p {
margin: 0;
font-size: 20px;
font-weight: bold;
color: transparent;
transition: 0.5s;
}
.container:hover p {
color: #da70d6;
}親要素のマウスホバー時に子要素に対して変更を加える場合は、サンプルの通り「親要素名:hover 子要素名{}」とすることで実装可能です。