【发布时间】：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;
}
非常感谢！
【问题讨论】：
标签： html css css-transitions