問題
2hover時に文字を透過にしよう
Webサイトに動きを付けることができる疑似クラスを使用した問題です。 hoverの定番、マウスを置いた際に要素が透過するスタイルの指定を行ないます！ よく使われる効果なので必須で覚えていきましょう！
ポイント
hoverとは
hoverとは、要素の上にマウスポインターを要素の上に置いたときに実行されるクラスのことです。
サイトの中で、要素にマウスポインターを重ねる必要があるものといえば、リンクがあります。
なので、リンクを作成するaタグと一緒に使われることが特に多い擬似クラスです。
この擬似クラスを使うことで、記事のURLに装飾を加えたり、クリックしたくなるようなボタンを作ることが出来ます。
hoverはCSSの疑似クラス
CSSの疑似クラスはセレクタに付与するキーワードのことで、選択した要素に特定の状態を指定します。
今回使用するhover以外にも、nth-childやeven、oddなどの疑似クラスが存在します。
その中でもより頻繁に使用されている疑似クラスがhoverです。
HTML_CSSの問題に挑戦しよう！
問題
「hover時に文字を透過にしよう」
文字の上にhoverする際に、その文字を透過させましょう!
今回使用するのはaタグではなく、spanタグを使用します。
HTMLコードを記述し「spanタグが透過します。」この文字列をhoverした際に透過を行ってください。
透過の比率は50%で行います。
また、カーソルですがpointerを指定ください。
あらかじめエディタに書くコード
<span>spanタグが透過します。</span>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
文字の上や要素にhoverしたタイミングで色や透過など変更したい場合は、CSSのセレクタに :hover を付与してあげます。
また、透過はopacityプロパティを指定します。透過50%の指定につきましては、opacity: 50%;ではなくopacity: .5;と書いた方が端的でいいと思います。
補足
hoverで文字や要素を透過させる方法は、WEBデザインを行なう上で頻繁に使用されています。
Webページ内のボタンを押下しようとした際に、半透明になるボタンを何度か見たことがありますよね?アレです。
また、hoverで設定したプロパティをまたさらにtransitionというプロパティと組み合わせることで「アニメーション」を作ることができます。
一通り基礎を学び終えたら、この「アニメーション」について学んでいくといいと思います。
