hover時に文字を透過にしよう
問題
文字の上にhoverする際に、その文字を透過させましょう!
今回使用するのはaタグではなく、spanタグを使用します。
HTMLコードを記述し「spanタグが透過します。」この文字列をhoverした際に透過を行ってください。
透過の比率は50%で行います。
また、カーソルですがpointerを指定ください。
今回使用するのはaタグではなく、spanタグを使用します。
HTMLコードを記述し「spanタグが透過します。」この文字列をhoverした際に透過を行ってください。
透過の比率は50%で行います。
また、カーソルですがpointerを指定ください。
自分の環境に書くコード
<span>spanタグが透過します。</span>
¥HTML¥
期待する画面
解答ソースコード
<span>spanタグが透過します。</span>
¥HTML¥
span {
cursor: pointer;
}
span:hover {
opacity: .5;
}
¥CSS¥
hoverで文字や要素を透過させる方法は、WEBデザインを行なう上で頻繁に使用されています。
Webページ内のボタンを押下しようとした際に、半透明になるボタンを何度か見たことがありますよね?アレです。
また、hoverで設定したプロパティをまたさらにtransitionというプロパティと組み合わせることで「アニメーション」を作ることができます。
一通り基礎を学び終えたら、この「アニメーション」について学んでいくといいと思います。
Webページ内のボタンを押下しようとした際に、半透明になるボタンを何度か見たことがありますよね?アレです。
また、hoverで設定したプロパティをまたさらにtransitionというプロパティと組み合わせることで「アニメーション」を作ることができます。
一通り基礎を学び終えたら、この「アニメーション」について学んでいくといいと思います。
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
解説
また、透過はopacityプロパティを指定します。透過50%の指定につきましては、opacity: 50%;ではなくopacity: .5;と書いた方が端的でいいと思います。