CSSでロールオーバー

   2014/06/26

ジャバスクリプトを使わずに、背景画像としてCSSでロールオーバーさせる方法。

#image a{
display:block;
width:200px;(画像の幅)
height:50px;(画像の高さ)
line-height:50px;(高さを指定して文字の高さを中央揃えにする)
color:文字色;
background:url(../img/画像ファイル1) no-repeat;
text-decoration:none;
text-align:center;}(文字を中央に揃える)
#image a:hover{
color:文字色; (マウスが重なった時の文字の色)
background:url(../img/画像ファイル1) no-repeat;
}

HTMLの記載は

<div id =”image”><a href=”URL”>○○○○(ここに文字が入る)</a></div>

重要なのは、CSS2行目の「display:block」という指定。
ロールオーバーをリンクの<a>タグに使う場合に使用する。
これをブロック要素といい、これを書かないと、画像が上手く表示されないので注意。

画像だけのロールオーバーの場合

#image1 a{
display:block;
width:278px;
height:89px;
background:url(img/logo_web1.png) no-repeat;
}
#image1 a:hover{
background:url(img/logo_web1_2.png) no-repeat;
}

HTMLの記載は

<div id ="image1"><a href="webdesign/rinen"></a></div>

画像のロールオーバーは、簡単!

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す