色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在一個CSS動畫后讓文本在懸停時再次可見？

CSS
錢斌斌2年前7瀏覽0評論

我對編碼非常陌生，我正試圖創建一個有趣的網站。我剛剛開始學習，所以我知道的不多，也許這不是做這件事的方法？

我有一個班級= & quottxt1 & quot它應用了一個動畫來淡化文本。但是，我希望動畫結束后，只有當我將鼠標懸停在文本上時，文本才再次可見。我在下面附上了代碼

.txt1{
    display: inline-flex;
    width: 20vw;
    text-align: left;
    float: right;
    margin-top: 15vh;
    margin-right: 15vw;

    font-size: 1.2em;
    
    opacity: 0;
    animation: fade-in-txt1 10s ease-in .5s forwards;
    transition: opacity 0.3s ease-in;
}

.txt1:hover{
    animation-play-state: paused !important;
    opacity: 1 !important;

}

@keyframes fade-in-txt1{
    0% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
}

HTML代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="home-page-cs.css">
    <title>Home</title>
</head>
<body>
    <div class="bck-img">
        <p class="txt1">Hello.</p>
    </div>
        <p class="home-text">You have come Home</p>
</body>
</html>

動畫播放得很好，但是當我將鼠標懸停在文本原來所在的位置時，沒有任何反應。