HTML_CSS
Googleでログイン
hoverとは
hoverとは、要素の上にマウスポインターを要素の上に置いたときに実行されるクラスのことです。
サイトの中で、要素にマウスポインターを重ねる必要があるものといえば、リンクがあります。
なので、リンクを作成するaタグと一緒に使われることが特に多い擬似クラスです。
この擬似クラスを使うことで、記事のURLに装飾を加えたり、クリックしたくなるようなボタンを作ることが出来ます。
hoverはCSSの疑似クラス
CSSの疑似クラスはセレクタに付与するキーワードのことで、選択した要素に特定の状態を指定します。
今回使用するhover以外にも、nth-childやeven、oddなどの疑似クラスが存在します。
その中でもより頻繁に使用されている疑似クラスがhoverです。
HTML_CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTML_CSSマスターへの第一歩となるでしょう。
問題2：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;と書いた方が端的でいいと思います。