Question

我正在尝试将图像用作链接，同时在同时点击时将图像与其他图像进行交换。（一旦用户点击它，基本上想让它看起来像一个按钮）。这是我的代码：

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 ，链接就不再起作用了。我试着隐藏/显示并替换为jQuery，但它也没有真正帮助..（好吧，也许我只是搞砸了，因为我只是开始使用网页设计 - ）。关于如何使这项工作的任何想法？非常感谢!!

Answer 1

如果您只想更改图像，则无需更改整个链接。使用background-image属性非常简单。所以它只有CSS解决方案......

＆＃13;

.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/);
}

＆＃13;

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

＆＃13;

无论哪种方式，如果您想隐藏/显示整个（img）链接，请尝试使用display: none;和display: block;。然后你还需要添加一个wrapper原因，如果你点击该项并隐藏它然后它已经消失了，没有什么会知道你仍然点击它会导致你隐藏它...这会使感？像这样工作：

＆＃13;

.button {
  position: absolute;
  top: 10px;
  left: 10px;
}

#nonpressed,
#pressed:active {
  display: none;
}

.wrap:active #nonpressed {
  display: block;
}

＆＃13;

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

＆＃13;

使用图片作为链接，同时点击时隐藏/替换它

1 个答案: