如何向图片链接添加简单的反馈？

【问题标题】：How to add simple feedback to an image link?如何向图片链接添加简单的反馈？
【发布时间】：2017-03-16 00:35:10
【问题描述】：

我正在使用 jQuery Mobile 制作一个简单的静态应用程序。我正在使用图像链接到其他页面，但我意识到这会让用户没有视觉反馈。有没有办法（最好使用 CSS）在点击链接时添加一点视觉反馈？

【问题讨论】：

是的，你可以给图片加边框，使用CSS3滤镜来改变图片。种种。你试过什么？
我不知道过滤器！我要和他们一起玩。

【解决方案1】：

您可以在图像的状态为focus或active时将border或box-shadow添加到图像。

例如：

.image{
  width: 100px;
  height: 30px;
  background: #777;
  border: 1px solid #222;
}

.image:focus, .image:active{
  box-shadow: 0 0 1px 1px #000;
}

&lt;a href="www.google.com" target="_blank"&gt;&lt;div class="image"&gt;&lt;/div&gt;&lt;/a&gt;

【讨论】：

正是我想要的。我没有意识到除了<a> 之外的那些伪类还可以使用元素