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

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;
}

但是图像按钮的背景只有在被点击时才会改变。

score 1 · Accepted Answer

您正在将该background-color属性添加到您的<img>. 如果图像不透明或部分透明，则背景颜色将不可见。

:active伪类是针对“单击”状态时使用的正确选择器，更具体地说，它等同于“鼠标按下”状态。您可能正在搜索针对:visited以前访问过的链接的伪类。

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

score 0 · Accepted Answer

问题可能是您将活动伪类与 img 标签上的类一起使用，而不是锚标签。

试试这个：a:active .imgBar{background-color:#000}

2 回答 2