javascript - 在特定时间段 CSS 或 Pure JS 后停止悬停

Question

我正在尝试找到一种方法来显示特定时间的悬停并将其停止。 我想显示背景 1 秒钟，然后即使鼠标仍处于打开状态也将其隐藏。 我的偏好是在 css 或 javascript 中，但我想让 jquery 远离我的代码。

这是一个JSFiddle我当前的代码。

#social {
    min-width: 350px;
    font-size: 11pt;
    text-align: center;
    width: 60%;
    margin: auto;
    word-spacing: 25pt;
}
#social a {
    padding: 4px 9px 4px 9px;
    color: #999999;
    text-decoration: none;
}
#social a:hover {
    color: transparent;
    background: red;
}

Answer 1

您可以使用 CSS animations ，类似于:

#social {
  min-width: 350px;
  font-size: 11pt;
  text-align: center;
  width: 60%;
  margin: auto;
  margin-top: 3vh;
  word-spacing: 25pt;
}

#social a {
  padding: 4px 9px 4px 9px;
  color: #999999;
  text-decoration: none;
}

#social a:hover {
  animation-name: background;
  animation-duration: 1s;
}

@keyframes background {
  from {
    background-color: transparent;
    color: #999;
  }
  to {
    background-color: red;
    color: white;
  }
}

<div id="social">
  <a href="#">showreel</a>
  <a href="#">linkedin</a>
  <a href="#">instagram</a>
  <a href="#">vscocam</a>
</div>