在特定时间段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，例如：

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

#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 {
    color: transparent;
	animation: backg 5s;
	-webkit-animation: backg 5s;
}

 @keyframes backg
    {
      0%   {background: red;}
      50%  {background: red;}
      100% {background: white;}
    }

    @-webkit-keyframes backg 
     {
      0%   {background: red;}
      50%  {background: red;}
      100% {background: white;}
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用动画和关键帧来完成此操作。在这种情况下，您的动画将如下所示：

org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerSecurityConfigurer

以下是更新的jsfiddle：https://jsfiddle.net/gk3nfmnj/1/

Answer 4

您可以使用css animation来获取它。

喜欢以下

＆＃13;

＆＃13;

#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: hover 2s;
}

@keyframes hover {
  from {
    background: transparent;
  }
  to {
    background: red;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;