リンクで遊ぶ
はじめに
ここにマウスを置いてね
HTML編集
適用するアンカータグにクラス名 clickme を指定します。
<a href="URLアドレス" class="clickme" >ここにマウスを置いてね</a>
CSS編集
a.clickme:hover{
background-image:url('イメージURLアドレス');
background-repeat:no-repeat;
background-position:center;
padding-top:31px;
}
難易度:★
今日のポイント
- アンカータグの定義済みクラスhover はマウスカーソルがリンクの上に重なったときに動作します。
- padding-topで上にイメージをずらしています。