在特定時間段後停止懸停CSS或Pure JS

我試圖找到一種方法來顯示特定時間的懸停並停止它。我想顯示背景1秒，然後隱藏它，即使鼠標仍然打開。我的喜好是在CSS或JavaScript，但我想保持jQuery的我的代碼。我的當前代碼是JSFiddle。在特定時間段後停止懸停CSS或Pure JS

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

來源

2017-07-10 Léo Durand

您可以使用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>

來源

2017-07-10 10:13:09 sol

這是完美的，感謝您的幫助！ –

@Leshautsdurant很高興幫助 – sol

#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; 
 
\t animation: backg 5s; 
 
\t -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;} 
 
    }

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

來源

2017-07-10 10:13:29

您可以使用動畫和關鍵幀來做到這一點。在這種情況下，你的動畫看起來像：

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

這裏是更新的jsfiddle：https://jsfiddle.net/gk3nfmnj/1/

來源

2017-07-10 10:14:29

感謝您的幫助！ –

您可以使用css animation得到它。

像下面

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

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

來源

2017-07-10 10:19:39 LKG

感謝您的幫助！ –

在特定時間段後停止懸停CSS或Pure JS

回答

相關問題