0

が選択 (クリック) されたときに、href (画像付き) の背景を変更するにはどうすればよいですか?

次の HTML コードがあります。

<li class="barButton" id="addHome">
  <a href="#">
    <img class="imgBar" id="animate1" src="img/interface.png" >
  </a>
</li>

次のCSSコードを試しました：

.imgBar:active {
    background-color: #000;
}

ただし、クリックするとイメージボタンの背景のみが変更されます。

4

2 に答える 2

1

background-colorにプロパティを追加しています<img>。画像が透明でない場合、または部分的に透明な場合、背景色は表示されません。

疑似クラスは、「クリック」状態を対象とする場合に使用する正しいセレクターです。:activeより具体的には、「マウスダウン」状態に相当します。:visited以前にアクセスしたリンクを対象とする疑似クラスを検索している可能性があります。

疑似クラス (例: ) を使用してアンカー タグをターゲットにしてみてくださいa:active .imgBar{ background-color: #000; }。アンカー要素はdisplay: inline;デフォルトであることに注意してください。したがって、デフォルトで画像の幅と高さに一致します。それでも背景色が表示されない場合は、パディングを追加してみて、何かが変わるかどうかを確認してください。

于 2013-01-29T20:22:24.863 に答える
0

問題は、アンカー タグではなく、img タグにあるクラスでアクティブな疑似クラスを使用している可能性があります。

これを試してください: a:active .imgBar{background-color:#000}

于 2013-01-29T19:43:11.257 に答える