CSSでロールオーバー

WEBデザイン

2012.07.312019.09.25

ジャバスクリプトを使わずに、背景画像として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の記載は

&lt;div id =”image”&gt;&lt;a href=”URL”&gt;○○○○（ここに文字が入る）&lt;/a&gt;&lt;/div&gt;

重要なのは、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の記載は

&lt;div id ="image1"&gt;&lt;a href="webdesign/rinen"&gt;&lt;/a&gt;&lt;/div&gt;

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