Javascript 在特定时间段CSS或纯JS后停止悬停

我正在试图找到一种方法来显示特定时间的悬停并停止它。 我想显示一个背景1秒钟，然后隐藏它，即使当鼠标仍在运行。 我的首选项是css或javascript，但我希望将jquery排除在代码之外

这是我当前代码的一部分

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

您可以使用，例如：

#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
动画名称：背景；
动画持续时间：1s；
}
@关键帧背景{
从{
背景色：透明；
颜色：#999；
}
到{
背景色：红色；
颜色：白色；
}
}

您可以使用，例如：

#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
动画名称：背景；
动画持续时间：1s；
}
@关键帧背景{
从{
背景色：透明；
颜色：#999；
}
到{
背景色：红色；
颜色：白色；
}
}

#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
颜色：透明；
动画：backg 5s；
-webkit动画：backg 5s；
}
@关键帧回退
{
0%{背景：红色；}
50%{背景：红色；}
100%{背景：白色；}
}
@-webkit关键帧备份
{
0%{背景：红色；}
50%{背景：红色；}
100%{背景：白色；}
}

#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
颜色：透明；
动画：backg 5s；
-webkit动画：backg 5s；
}
@关键帧回退
{
0%{背景：红色；}
50%{背景：红色；}
100%{背景：白色；}
}
@-webkit关键帧备份
{
0%{背景：红色；}
50%{背景：红色；}
100%{背景：白色；}
}

---

您可以使用动画和关键帧来执行此操作。在这种情况下，您的动画看起来像：

@keyframes hover-effect {
    0% {
        background-color: transparent;
        color: #999999;
    }

    1% {
        color: transparent;
        background: red;
    }

    100% {
        color: transparent;
        background: red;
    }
}

.class:hover {
  animation: hover-effect 1s ease;
}

---

下面是更新的JSFIDLE:

您可以使用动画和关键帧来完成此操作。在这种情况下，您的动画看起来像：

@keyframes hover-effect {
    0% {
        background-color: transparent;
        color: #999999;
    }

    1% {
        color: transparent;
        background: red;
    }

    100% {
        color: transparent;
        background: red;
    }
}

.class:hover {
  animation: hover-effect 1s ease;
}

---

下面是更新的JSFIDLE:

您可以使用

css动画来获得它

像下面


#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
动画：悬停2s；
}
@关键帧悬停{
从{
背景：透明；
}
到{
背景：红色；
}
}
您可以使用
css动画来获得它

像下面


#社交{
最小宽度：350px；
字号：11pt；
文本对齐：居中；
宽度：60%；
保证金：自动；
边际上限：3vh；
字距：25分；
}
#社会的{
填充：4px 9px 4px 9px；
颜色：#999999；
文字装饰：无；
}
#社交a：悬停{
动画：悬停2s；
}
@关键帧悬停{
从{
背景：透明；
}
到{
背景：红色；
}
}

谢谢您的帮助！谢谢你的帮助！谢谢你的帮助！谢谢你的帮助@莱肖特杜兰特很高兴helped@Leshautsdurant很高兴这有帮助