CSSでロールオーバー

• May 17, 2008
• Tags: css, tips

JavasScriptも、画像置換も使わずにCSSでロールオーバー。

XHTML

<ul>
<li id="a"><a href="..."><img src="img/a_off.gif" alt="a" /></a></li>
<li id="b"><a href="..."><img src="img/b_off.gif" alt="b" /></a></li>
<li id="c"><a href="..."><img src="img/c_off.gif" alt="c" /></a></li>
<li id="d"><a href="..."><img src="img/d_off.gif" alt="d" /></a></li>
</ul>

CSS

li {
 list-style-type:none;
 width: 130px;
 height: 30px;
 float: left;
}

li img {
 border: 0;
}

li#a {
 background: url(../img/a_on.gif) no-repeat;
}

li#b {
 background: url(../img/b_on.gif) no-repeat;
}

li#c {
 background: url(../img/c_on.gif) no-repeat;
}

li#d {
 background: url(../img/d_on.gif) no-repeat;
}

li a {
 display: block;
 width: 130px;
 height: 30px;
}

li a:hover {
 background-color: transparent;     /* ie6対応 */
}

li a:hover img {
 visibility: hidden;
}

li要素の背景にロールオーバー時の画像を配置し、a要素にマウスが重なった際にimg要素のvisibilityをhiddenにしています。