html - 順序付けられていないリストアイテムのMouseOverでの背景画像の交換

Question

リストアイテムがあり、テキストではなくアイテムに画像を表示したいのですが…。それを行うための最良の方法は何ですか？そして、私を殺しているのは、画像をマウスオーバーイベントと交換しようとしていることです...どんな助けもいただければ幸いです...。

Answer 1

あなたはこの私のフィドルのようにそれを行うことができます

説明：

ここでは、各要素に背景画像を<li>与え、これらに少しパディングを与えるよりも<li>...今:hover、これらを別の画像に置き換えます:)

HTML

<ul>
   <li>Hello</li>
   <li>World</li>
</ul>​

CSS

ul li {
    background-image: url('http://www.bseindia.com/include/images/nav_bullet.png');
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding-left: 10px;
}

li:hover {
    background-image: url('http://www.rbs.in/India/_image/bullet-blue.gif');
    background-repeat: no-repeat;
    background-position: 2px 4px;
    padding-left: 10px;
}

</ p>