CSS 转换不能反向工作

Question

我正在制作一个网站，其中一个页面需要一个带有炫酷动画的悬停框。我很快写了代码。但是过渡并没有像它应该的那样工作。它只是从正常到 :hover，而不是从 :hover 到正常。一旦我将鼠标移到其他地方，我的 div returns 就会恢复正常状态，没有任何动画。有人对此有解决方案吗？

这是我的 HTML 和 CSS 文件 -

HTML -

<html>
<head>
    <title> Rubik's Point | Home </title>
    <link rel = "stylesheet" href = "Styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,700;1,300&display=swap" rel="stylesheet">
</head>

<body>
    <div class = "header">
        <div class = "logo">
            <h1 class = "specialTitle"><a href = "Home.html"> RUBIK'S POINT </a> </h1>
        </div>
        
        <div class = "navContainer">
            <ul>
                <li><b><a href = "Home.html"> Home </a></b></li>
                <li><b><a href = "Tutorials.html" id = "currentPage"> Tutorials </a></b></li>
                <li><b><a href = ""> Give Us a Feedback </a></b></li>
                <li><b><a href = ""> Contact Us </a></b></li>
            </ul>
        </div>
    </div>
    
    <div class = "intro">
        <div class = "introTextbox">
            <h1> Become a Cube Master </h1> 
            <h3> In this section, you will find many tutorials which will teach you how to solve different types of cube puzzles. </h3>
        </div>
    </div>
    
    <div class = "mainContent">
        <center> <h1> Here are some Popular Tutorials </h1> </center>
        
        <div class = "hoverContainer">
            <div class = "hoverbox">
                <img src = "F:\Rubiks Point\Images\Tutorials\cube background.jpg" width = "100%" height = "100%"></img>
            </div>
            
            <div class = "hoverbox">
                <img src = "F:\Rubiks Point\Images\Tutorials\fast solve 2.jpg"></img>
            </div>
        </div>
    </div>  
    
    <div class = "footer">
        <div class = "colfooter">
            <p> <a href = ""> Give Us a Feedback > </a> </p> 
            <p> <a href = ""> Learn to Solve the Rubik's Cube > </a> </p> 
            <p> <a href = ""> Learn to Solve the Rubik's Cube Faster > </a> </p>
        </div>
        
        <div class = "colfooter">
            <p> <a href = ""> Contact Us > </a> </p> 
            <p> <a href = ""> Learn Conventional Algorithms > </a> </p>
        </div>
    </div>
</body>
</html>

CSS-

* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Mulish', sans-serif;
}

.header {
width: 100%;
height: 75px;
background-color: #222222;
color: white;
line-height: 75px;
padding-left: 50px;
padding-right: 100px;
overflow-y: hidden;
position: fixed;
}

.logo {
width: 30%;
float: left;
font-family: "Lulo Clean";
}

.logo a {
text-decoration: none;
color: white;
}

.navContainer {
width: 70%;
list-style-type: none;
float: right;
text-align: right;
}

.navContainer li {
display: inline-block;
padding-left: 50px;
font-size: 20;
}

.navContainer a {
text-decoration: none;
color: white;
}

.navContainer a:hover {
color: orange;
}

.intro {
width: 100%;
height: 850px;
background-color: gray;
color: white;
line-height: 850px;
text-align: right;
background-image: url("F:/Rubiks Point/Images/cube background.jpg");
}

.introTextbox { 
width: 40%;
height: 100%;
float: right;
text-align: center;
line-height: 50px;
padding-top: 400px;
margin-right: 100px;
font-size: 20;
font-family: 'Mulish', sans-serif;
}

.mainContent {
width: 100%;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 75px;
background-color: white;
}

.footer {
width: 100%;
height: 230px;
padding-left: 340px;
padding-right: 440px;
padding-top: 55px;
padding-bottom: 60px;
background-color: #222222;
color: white;
display: flex;
}

.row1 {
display: flex;
padding-top: 125px;
padding-bottom: 50px;
padding-right: 50px;
}

.row2 {
display: flex;
padding-top: 75px;
padding-left: 150px;
padding-right: 200px;
}

.col {
width: 330px;
margin-left: 50px;
text-align: center;
}

.col p {
margin-top: 30px;
}

.colfooter {    
padding-left: 100px;
}

.colfooter a {  
color: white;
}

.colfooter p {
padding-top: 15px;
}

.specialTitle {
letter-spacing: 10px;
}

.hoverContainer {
width: 100%;
height: 375px;
margin-top: 75px;
display: flex;
}

.hoverbox {
width: 30%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
text-align: center;
}

.hoverbox img {
width: 100%;
height: 100%;
}

.hoverbox:hover img {
border-radius: 50%;
width: 25%;
height: 25%;
transition: 0.5s ease;
}

#currentPage {
color: orange;
}

非常感谢！

Answer 1

将 transition: 0.5s ease; 设置从 .hoverbox:hover img 规则中移出并放入 .hoverbox img 规则中 - 它需要处于默认状态，而不是处于悬停状态。

CSS 转换不能反向工作

CSS Transition not working in the reverse direction

html

css

css-transitions