hover時に文字を透過にしよう

問題

文字の上にhoverする際に、その文字を透過させましょう!

今回使用するのはaタグではなく、spanタグを使用します。
HTMLコードを記述し「spanタグが透過します。」この文字列をhoverした際に透過を行ってください。

透過の比率は50%で行います。

また、カーソルですがpointerを指定ください。

自分の環境に書くコード

              <span>spanタグが透過します。</span>
¥HTML¥

期待する画面

解答ソースコード

              <span>spanタグが透過します。</span>
¥HTML¥

              span {
   cursor: pointer; 
}
span:hover {
    opacity: .5;
 }
¥CSS¥

解説

文字の上や要素にhoverしたタイミングで色や透過など変更したい場合は、CSSのセレクタに :hover を付与してあげます。

また、透過はopacityプロパティを指定します。透過50%の指定につきましては、opacity: 50%;ではなくopacity: .5;と書いた方が端的でいいと思います。

ログインして解答を見る

hoverで文字や要素を透過させる方法は、WEBデザインを行なう上で頻繁に使用されています。
Webページ内のボタンを押下しようとした際に、半透明になるボタンを何度か見たことがありますよね?アレです。

また、hoverで設定したプロパティをまたさらにtransitionというプロパティと組み合わせることで「アニメーション」を作ることができます。
一通り基礎を学び終えたら、この「アニメーション」について学んでいくといいと思います。