使用图像作为 link，同时单击时 hide/replace

Question

我正在尝试将一张图片用作 link，同时单击时将其与另一张图片交换。（基本上想让它看起来像一个按钮被按下，一旦用户点击它）。这是我的代码：

HTML

<a class="button" id="nonpressed" href="..."><img src="images/nonpressed.png"/></a>
<a class="button" id="pressed" href="..."><img src="images/pressed.png"/></a>

CSS

.button {
position: absolute;
top: 540px;
left: 90px;
}

#nonpressed {
z-index: 2;
}

#nonpressed:active {
visibility: hidden;
}

#pressed {
z-index: 1;
}

问题是，一旦我开始隐藏 #nonpressed，link 就不再起作用了。我也试过 hide/show 并用 jQuery 替换，但它也没有真正帮助..（好吧，也许我只是搞砸了，因为我才刚刚开始网页设计--）。关于如何使这项工作有任何想法？非常感谢！！

Answer 1

如果您只想更改图像，则无需更改整个 link。使用背景图像属性非常容易。所以这是 CSS 唯一的解决方案......

.button {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  background-size: 100px 100px;
}

.button:active {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
}

<a class="button" href="#"></a>

无论哪种方式，如果您想 hide/show 整个 (img) link 尝试 display: none; 和 display: block;。然后您还需要添加一个 wrapper 因为如果您单击该项目并将其隐藏然后它就消失了并且没有人会知道您仍然单击它因为您隐藏了它......这有意义吗？就像这样它有效：

.button {
  position: absolute;
  top: 10px;
  left: 10px;
}

#nonpressed,
#pressed:active {
  display: none;
}

.wrap:active #nonpressed {
  display: block;
}

<div class="wrap">
<a class="button" id="nonpressed" href="#"><img src="http://lorempixel.com/400/200/sports/2/"/></a>
<a class="button" id="pressed" href="#"><img src="http://lorempixel.com/400/200/sports/1/"/></a>
</div>

使用图像作为 link，同时单击时 hide/replace

use image as link, hide/replace it when clicked at the same time

html

css

swap

image

href