Question

这就是问题所在。我有一个方形div，我给它动画（在CSS中）向下滑动页面。当我在它上面盘旋时，我也使div消失（在JavaScript中）。如果当鼠标在鼠标下滑动时我保持鼠标不动而没有移动它，它没有记录我在它上面盘旋而没有任何反应。如果我将鼠标移动到最小的位置，那么它就会意识到我正在盘旋它。这是一个解释我的问题的JSFiddle。 https://jsfiddle.net/z4q45Laz/1/ 这是我的HTML

!DOCTYPE HTML
<html>
  <head>
    <title>test</title>
  <head
  <body>
    <div class="square" id="square" onmouseover="test()">

    </div>

    <script>
    function test(){
        document.getElementById("square").style.backgroundColor = "#ff0000";
}
    </script>
  </body>
</html>

和我的css

.square {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-animation: blockMove 4s linear infinite; 
  animation: blockMove 4s linear infinite;
}


@-webkit-keyframes blockMove{
   from {top: 0;}
   to {top: 90%;}
}

@keyframes blockMove{
   from {top: 0;}
   to {top: 90%;}
}

Answer 1

你可以用css解决它，这里是代码：

.square {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-animation: blockMove 4s linear infinite; 
  animation: blockMove 4s linear infinite;
}
.square:hover {
	background-color: red;
}

@-webkit-keyframes blockMove{
   from {top: 0;}
   to {top: 90%;}
}

@keyframes blockMove{
   from {top: 0;}
   to {top: 90%;}
}

<div class="square">
  
  </div>

悬停在不工作时的动画对象

1 个答案: