选择（单击）时如何更改超链接（带图像）的背景？

Question

如何在选择（点击）时更改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;
}

但单击图像按钮的背景会在单击时更改。

Answer 1

您正在向background-color添加<img>媒体资源。如果图像不透明或部分透明，则背景颜色将不可见。

:active伪类是在定位“点击”状态时使用的正确选择器，更具体地说，它等同于“mousedown”状态。您可能正在搜索:visited伪类，该伪目标针对之前访问过的链接。

您应该尝试使用伪类（例如a:active .imgBar{ background-color: #000; }）定位您的锚标记。请记住，锚元素默认为display: inline;，因此默认情况下它将匹配图像的宽度和高度。如果您仍然没有看到背景颜色，请尝试向其添加一些填充，看看是否有任何变化。

Answer 2

问题可能是您正在使用活动伪类与img标记上的类，而不是锚标记。

试试这个：a：有效.imgBar {background-color：＃000}