我想让一个 div 滑过另一个向后的,但不知道如何提示?我可以制作动画,但是当我将鼠标悬停在动画上时无法正常工作,有人可以解释一下为什么吗?
<!DOCTYPE html>
<html>
<head>
<style>
.fundo_main {
width:200px;
height:200px;
background-color:red;
position:relative;
}
.fundo_main:hover {
width:200px;
height:200px;
-webkit-animation-name:myfirst;
position:relative;
}
.fundo {
width:200px;
height:200px;
background-color:red;
position:relative;
-webkit-animation-name:myfirst;
}
.fundo:hover {
width:200px;
height:200px;
background-color:blue;
-webkit-animation-name:myfirst;
-webkit-animation-duration:.3s;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:left;
}
@-webkit-keyframes myfirst {
0% { width:0px; }
65% { width: 150px;}
100% { width:200px; }
}
</style>
</head>
<body>
<div class="fundo_main">
<div class="fundo"></div>
</div>
</body>
</html>