jquery - 单击更改输入不透明度

Question

出于某种原因，:Active 标签不会使按钮消失或将不透明度变为 0.0 有什么想法吗？

#button1 {
  height: 50px;
  width: 250px;
  position: absolute;
  left: 300px;
  top: 500px;
  opacity: 0.6;
}
#button1:hover {
  width: 270px;
  height: 60px;
}
#button1:visited {
  width: 0px;
  height: 0px;
  opacity: 0.0;
}

<a href="test" target="_blank">
  <input type="image" id="button1" src="button.png" />
</a>

Answer 1

在没有 JavaScript 的情况下执行此操作的一种方法是使用 CSS 目标。首先，为您的链接提供一个 id 属性:

<a id="test" href="#test">
  <input type="image" id="button1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/138.jpg" />
</a>

接下来，您在 CSS 中定位该 id:

#test:target {
  display: none;
}