单击0.5秒后如何在div中着色图像

Question

我正在开发一个手机应用程序。

我有一组div，每个div都包含一个图像元素。我已经搜索过并找到了点击它们时如何给它们着色，但色调保持在那里（当然）。

我想知道的是如何在0.5秒后自动删除该色调。

这是我现在的代码：

......
<div id="seven">
  <img id="7" src="imageSeven.png" />
  <p>7</p>
</div>
......

<script type="text/javascript">
var seven = document.getElementById("seven");
.......
seven.onclick = function () {
  seven.className = seven.className + " overlay";
}
....

这是我的css：

.overlay
{
display: block;
position: absolute;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
border-radius: 8%;
}

关于我该怎么做的任何想法？

PS：

我只复制了其中一个，其他的完全相同。

Answer 1

var delay=500;
setTimeout(function(){
    //Code to remove tint
},delay);