相关疑难解决方法(0)

触发:悬停在移动元素上而不移动鼠标

#box {
  animation: scroll 2s linear infinite;
  width: 100px;
  height: 100px;
  background: red;
}

#box:hover {
  background: green;
}

@keyframes scroll {
  from {transform: none;}
  to {transform: translateX(400px);}
}

Run Code Online (Sandbox Code Playgroud)

<div id="box"></div>

Run Code Online (Sandbox Code Playgroud)

如果将鼠标悬停在方框上,如果之后没有移动鼠标,它将保持绿色.如果将鼠标放在路径中并且不移动,则不会触发悬停.

在这种情况下,是否有一种触发悬停而不移动鼠标的方法？

编辑:不使用JavaScript.

html css onmousemove hover mousemove

coz*_*one

2018 08-05

8
推荐指数

1
解决办法

177
查看次数

悬停不一致地处理动画元素

我正在用css围绕圆形路径旋转div,我想让它在悬停时改变颜色.

请参阅此处的演示:http://jsfiddle.net/gg7tnueu/1/

html,
body {
  height: 100%;
  margin: 0;
}

.planet {
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  position: absolute;
  margin: auto;
  /*top: 50%;*/
  -webkit-animation: orbit 6s infinite linear;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  animation: orbit 6s infinite linear;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.planet.code {
  -webkit-transform-origin: 8.5vh 7.875vh;
  transform-origin: 8.5vh 7.875vh;
}

.planet.code:hover {
  background: red;
}

@-webkit-keyframes orbit {
  0% {
    -webkit-transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes orbit {
  0% {
    transform: …

Run Code Online (Sandbox Code Playgroud)

css css3 css-animations

van*_*een

2015 03-05

5
推荐指数

1
解决办法

153
查看次数