忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
文字の上に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;と書いた方が端的でいいと思います。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET