HTML鼠标悬停使用css过渡怎么延长鼠标离开后的回复动作时间

img

transition延时时间改长一些即可
你题目的解答代码如下：

#xiazai:hover {
    
    background:gold;
    color:#00000;
    border-radius:10px;
    transform:translateX(-12px);
    transition:1s;  /*鼠标移入时的动作时间*/
}
#xiazai {
    border:none;
    border-radius:5px;
    color:white;
    background:deepskyblue;
    cursor:pointer;
    font-size:20px;
    height:70px;
    width:200px;
    letter-spacing:0.25rem;
    float:right;
    transition:3s;  /*鼠标离开后的回复动作时间*/

}

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

img


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #xiazai:hover {
            background: gold;
            color: red;
            border-radius: 10px;
            transform: translateX(-12px);
            transition: 3s; /*鼠标移入时的动作时间*/
        }

        #xiazai {
            border: none;
            border-radius: 5px;
            color: white;
            background: deepskyblue;
            cursor: pointer;
            font-size: 20px;
            height: 70px;
            width: 200px;
            letter-spacing: 0.25rem;
            transition: 3s; /*鼠标离开后的回复动作时间*/
 

    </style>
</head>
<body>
    <a id="xiazai" href="#">测试连接</a>
</body>
</html>