在鼠标悬停时使用 CSS 规则

Use CSS rule on Mouse hover

本文关键字：CSS 规则 鼠标 悬停      更新时间：2023-09-26

我有一个自动移动的表盘，我想找到一种方法，让它仅在鼠标悬停在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);
    }
}

：悬停普苏多类

仅当悬停在其前面的元素时处于活动状态。

使用:hover ：

#logo .needle:hover {
    -webkit-animation:move 5s infinite;
    animation:move 5s infinite;
}

然后摆脱您目前拥有的-webkit-animation。仅当您将鼠标悬停在 #logo 中的 .needle 元素上时，才会播放移动动画。

此外，您不再需要为animation添加前缀：http://caniuse.com/#search=css%20animation

这里有一个小提琴：https://jsfiddle.net/r0w71wkv/5/。

我可能会注意到，您最好先设置#mainwrapdiv的宽度和高度，然后使用#mainwrap:hover .needle，因为这样用户就不必直接将鼠标悬停在指针上。这就像：https://jsfiddle.net/r0w71wkv/6/。

相关文章：