ログイン

問題2 hover時に文字を透過にしよう

HTML_CSSの問題

HTML_CSS

hoverとは、疑似クラスのひとつで要素の上にカーソルが乗った時に実行されるクラスのことです。hoverはWEBデザインで頻繁に使用するので必ず覚えておきましょう!

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というプロパティと組み合わせることで「アニメーション」を作ることができます。
一通り基礎を学び終えたら、この「アニメーション」について学んでいくといいと思います。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!