移动端点击返回顶部箭头图片后，如何重置其opacity至初始值？

我页面里有个作为返回顶部链接的向上箭头图片，默认opacity为0.2，鼠标悬停时opacity变为1。但在手机或平板设备上点击该图片后，opacity会保持为1，希望点击操作完成后图片的opacity能恢复为0.2，该如何实现？

我的HTML代码：

<a href="#top"><img src="./img/up.png" alt="up" title="up"></a>

我的CSS代码：

a > img {
    width: 60%;
    height: 60%;
    opacity: 0.2;
}
a > img:hover {
    opacity: 1;
}

解决方案一：用CSS伪类处理焦点与激活状态 #

移动端触摸点击后，元素会保持focus状态，这就是opacity一直为1的核心原因。只需在CSS中补充对focus和active状态的规则：

a > img {
    width: 60%;
    height: 60%;
    opacity: 0.2;
}
a > img:hover,
a > img:active { /* 点击按住时保持高亮状态 */
    opacity: 1;
}
a > img:focus { /* 点击完成后恢复初始opacity */
    opacity: 0.2;
    outline: none; /* 可选：移除浏览器默认的焦点边框 */
}

如果不需要点击过程中保持高亮，也可以直接重置这两个状态的opacity：

a > img:focus,
a > img:active {
    opacity: 0.2;
}

解决方案二：用JavaScript手动移除焦点 #

给链接添加一个ID标识，然后监听点击事件，强制移除元素的焦点状态：

修改HTML：

<a href="#top" id="back-to-top"><img src="./img/up.png" alt="up" title="up"></a>

添加JavaScript代码：

document.getElementById('back-to-top').addEventListener('click', function() {
    this.blur(); // 移除焦点，让hover状态自动失效
});

这个方法逻辑更直接，能确保点击完成后元素立刻回到初始样式。

内容的提问来源于stack exchange，提问作者Davidwys