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の記述が間違っているのでしょうか？
ご教授お願い致します。

回答No.2

yambejp · ベストアンサー

おおよそイメージ通りでしたね

えーと、aに属性がついているものを.hoeでクリアするのですから
それなりに面倒です

方法としては・・・
(1)クラスをわける
<li><a class="foo" href="#">　　サービス概要</a></li>
<li><a class="hae" href="#">　　aaaaa</a></li>
などして、aにbackgroudをつけずに.fooに設定すれば、haeには
影響がありません

(2)透明な画像を用意する
透明な画像(透過gifなど)を用意しておいて、haeのbackgroudには
それを指定する。

のどちらかが簡単でよろしいかと。

お礼

ありがとうございます。
（１）の方法でうまくいきました。
大変助かりました。

回答No.1

yambejp

ごめんなさい、いまひとつ希望の結果がわかりかねるので
的をはずした回答かもしれませんが・・・
#navi liに設定されているbackgroundのurlを取ればよいのでは？

補足

早速のご回答ありがとうございます。

すいません、質問の意図が伝わりづらいですよね・・・

メニューを作成しています。
メニューのテキストの左には画像を表示させるようにしています。
メニューの1部（上記ではaaaa）だけ画像を非表示にしたい
と思い、クラスをつけました。
しかしhover時に#navi a:hover backgroundに指定してある画像が表示されてしまいます。

liのurlをはずしたところ、カーソルを載せていない時の画像は表示されなくなりましたが、やはりhover時の画像が表示されてしまいます。