我有一个自动移动的表盘,我想找到一种方法让它只在鼠标悬停在div上时移动。我已经读过,可能无法在javascript中执行此操作,但我希望这里的某个人可能有解决方案。
这是我到目前为止所拥有的。 https://jsfiddle.net/r0w71wkv/
#logo {
display: inline-block;
position: relative;
}
#logo .speedometer {
width: 80px;
height: 80px;
}
#logo .needle {
width: 5px;
height: 80px;
background: #324A90;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
display: inline-block;
left: 110px;
position: absolute;
top: 10px;
-webkit-animation:move 5s infinite;
transform:rotate(0deg);
transform-origin:bottom;
}
@-webkit-keyframes move {
0% {
transform:rotate(-180deg);
}
50% {
transform:rotate(90deg);
}
100% {
transform:rotate(-180deg);
}
}
答案 0 :(得分:2)
:悬停 Psudeoclass
仅在其前面的元素悬停时才有效。
使用:hover
:
#logo .needle:hover {
-webkit-animation:move 5s infinite;
animation:move 5s infinite;
}
然后摆脱你目前的-webkit-animation
。仅当您将鼠标悬停在.needle
中的#logo
元素上时,才会播放移动动画。
此外,您不再需要animation
的前缀:http://caniuse.com/#search=css%20animation
这是一个小提琴:https://jsfiddle.net/r0w71wkv/5/。
我可能会注意到,首先设置#mainwrap
div的宽度和高度,然后使用#mainwrap:hover .needle
可能会更好,因为这样用户不必悬停直接过针。这可能是:https://jsfiddle.net/r0w71wkv/6/。