-1

私はそのような順序付けされていないリストを持っています...

<div class="social">
<ul>
<li><a href="#">Find Me <img src="images/facebookGrey.png" width="50" border="0" style="vertical-align:middle;" class="facebook" /></a></li>
</ul>
</div>

私がやろうとしているのは、ホバーを設定して、ユーザーがそのリストアイテムにカーソルを合わせると、画像が変わるようにすることです。

これが私が試したcssです。

.social ul img.facebook a:hover{
    background-image:url(images/facebook.png);
    width:50px;
}

何か案は？

4

3 に答える 3

2

そのはず：

.social ul a:hover img.facebook

画像がアンカーの内側にあるためです。

imgただし、タグをまとめて削除し、アンカーを使用してそのプロパティを設定する方がよい場合がありbackground-imageます。

于 2012-06-10T20:36:18.963 に答える
1

背景画像と実際の画像を混同しています。

の背景画像をに設定し、<a>ホバーimages/facebookGrey.png時に背景画像を変更します。

于 2012-06-10T20:36:55.047 に答える
1

画像はリンク内にあり、その逆ではありません。また、CSSを介して画像のソースを変更することはできません。背景の設定は機能しますが、ソースはその上にあります。画像名の見た目からは、何の効果も見られません。

次のようなものを試してください。

<div class="social">
<ul>
<li><a href="#">Find Me</a></li>
</ul>
</div>

.social ul a {
    background-image: url(images/facebookGrey.png);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 60px;
}
.social ul a:hover {
    background-image: url(images/facebook.png);
}
于 2012-06-10T20:39:48.447 に答える