UL と LI を使用して水平メニューを作成したいと考えています。唯一の問題は、すべてのボタンの画像にテキストが含まれているため、画像を onmouse over で表示したいということです。
私は各liに画像の背景の幅と高さを持つクラスを与えようとしましたが、それはうまくいきません。
これは私のhtmlです
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><img src="imgs/nav/home.png" border="0" /></a></li>
<li><a href="#"><img src="imgs/nav/about.png" border="0" /></a></li>
<li><a href="#"><img src="imgs/nav/webshop.png" border="0" /></a></li>
<li><a href="#"><img src="imgs/nav/lookbook.png" border="0" /></a></li>
<li><a href="#"><img src="imgs/nav/blog.png" border="0" /></a></li>
<li><a href="#"><img src="imgs/nav/news.png" border="0" /></a></li>
</ul>
</div>
ここに私のcssがあります
#navlist
{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li
{
display: inline;
padding:0;
margin: 0;
}
#navlist li:before { content: url('../imgs/nav/slash.png'); }
#navlist li:first-child:before { content: ""; }
/*IE workaround*/
/*All IE browsers*/
* html #navlist li
{
background-image: url('../imgs/nav/slash.png');
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist { height: 1%; }
* html #navlist li
{
display: block;
float: left;
}
:after 各ボタンのすぐ隣に画像を配置します....