リンクに画像

質問

リンクに画像

ulのリストのリンクにカーソルを当てると左側に小さなアイコンが出るようにしました。
が、下のようにすると文字にかかってしまいます。
文字にかからないようにするにはどうすればいいでしょう？
padding-leftで文字をずらしたつもりが、画像まで一緒にずれてしまいます。

ul#indx li {margin:10px 0 0 0; padding-left:20px;}
ul#indx a:hover{background-image: url("../images/sho-kira-f12.gif");background-repeat: no-repeat;
background-position: center left;}

回答No.2

yambejp · ベストアンサー

ulのaタグにonmouseoverしたらimgが頭にはいるということでよろしいですか？

それなら:before疑似クラスを使えばいいのでは？
ieはbeforeが使えないのでbehaivorで処理します。
<style>
ul#indx li {
list-style:none;
}
ul#indx a:hover:before{
content: url(1.jpg);
}
ul#indx a:hover{
behavior:expression(
c=document.createElement("img"),
c.setAttribute("src","1.jpg"),
f=this.firstChild,
f.nodeName=="#text"?this.insertBefore(c,f):false
)
}
ul#indx a{
behavior:expression(
f=this.firstChild,
f.nodeName=="IMG"?this.removeChild(f):false
)
}
</style>
<ul id="indx">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>

お礼

ありがとうございます！

回答No.1

grumpy_the_dwarf

ul要素の中のa要素の背景画像をいじってるんですが、そこには全く
padding-leftの話は出てきませんね。li要素のpadding領域に描画し
たいなら、li要素の背景である必要があります。ul#indx li:hover
で記載してみて下さい。