Question

我有以下代码,当您运行代码时,框 / 块自动从其位置移动,并在完成一个正方形循环后最终到达起点 (左-& gt;右-& gt;底部-& gt;左-& gt;顶部)。我希望盒子只有在悬停时才从其位置移动。原始代码是:

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

我试图使用 CSS 插入“悬停”属性，但它不起作用（代码被完全忽略）。我如何修改代码，使得块仅在悬停时从其位置移动，当光标从其中移除时，它回到原来的位置？

3

Answer 1

你需要一个容器来做到这一点，试试这个：

<html>
<head>
<style> 
.block {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.container:hover .block {animation-name: example; animation-duration: 4s;}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  
<div class='container'>
  <div class='block'></div>
</div>
  
</body>
</html>

或者，你也可以试试这个。但是要确保你的鼠标总是悬停在块上。

<html>
<head>
<style> 
.block {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.block:hover {animation-name: example; animation-duration: 4s;}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  
<div class='block'></div>
  
</body>
</html>