CSSでの個別hover設定

CSSでの個別hover設定

<div id="navi">
<ul>
<li><a href="#">　　HOME</a></li>
<li><a href="#">　　サービス概要</a></li>
<li><a class="hae" href="#">　　aaaaa</a></li>
<li><a href="#">　　会社概要</a></li>
<li><a href="#">　　お問い合わせ</a></li>
<li><a href="#"><span class="1">　　サイトマップ</span></a></li>
</ul>
</div>



#navi ul{
font-size: 12px;
list-style: none;
margin: 0 0 0 10px;
padding: 0 0 0 0;
border-top: 1px solid #ccc;
}

#navi li{
margin: 0;
padding: 0;
border-bottom: 1px solid #CCC;
background: #ffffff url(../img/image133.gif) left center no-repeat;
}

#navi{
width: 150px;
}

#navi a{
background: #ffffff url(../img/image131.gif) no-repeat left center;
padding: 4px 0 4px 0px;
display: block;
width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 150px; /*Window IE5用の値を指定 */
color: #333;text-decoration: none;
}

#navi a:hover {
background: #FFFFFF url(../img/image133.gif) left center no-repeat;
padding: 4px 0 4px 0px;
display: block;
width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 150px; /*Window IE5用の値を指定 */
color: #333;
text-decoration: none;
}

#navi .hae{
background:none;
padding: 4px 0 4px 10px;
display: block;
width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 150px; /*Window IE5用の値を指定 */
color: #333;text-decoration: none;
}

#navi .hae:hover{
background:none;
padding: 4px 0 4px 10px;
display: block;
width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 150px; /*Window IE5用の値を指定 */
color: #333;text-decoration: none;
}

現在、上記の内容で作成しているのですが、サービス概要の下にある
aaaaだけを画像表示をOFFにしたいと思ってます。
クラスを設定してカーソルを載せていない時の非表示は出来たのですが
ロールオーバー時の画像が表示されてしまいます。

CSSでのクラスhoverの記述が間違っているのでしょうか？
ご教授お願い致します。

投稿日時 - 2008-06-20 11:56:38