CSS过渡不反向工作[重复]
Posted
技术标签:
【中文标题】CSS过渡不反向工作[重复]【英文标题】：CSS Transition not working in the reverse direction [duplicate] 【发布时间】：2020-11-25 14:48:09 【问题描述】：我正在制作一个网站，其中一个页面需要一个带有酷炫动画的悬停框。我很快写了代码。但过渡并没有像应有的那样进行。它只能从正常工作到:hover，而不是从:hover 正常工作。一旦我将鼠标移到其他地方，我的 div 就会恢复到正常状态，没有任何动画。有人对此有解决方案吗？
这是我的 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;
非常感谢！
【问题讨论】：
【参考方案1】：将transition: 0.5s ease; 设置移出.hoverbox:hover img 规则并将其放入.hoverbox img 规则中 - 它需要处于默认状态，而不是悬停状态。
【讨论】：
哇，它解决了我的问题。非常感谢！！！以上是关于CSS过渡不反向工作[重复]的主要内容，如果未能解决你的问题，请参考以下文章
PrimeFaces Mobile 反向幻灯片过渡给了我“对实体“反向”的引用必须以“;”结尾定界符。´ [重复]