jquery - CSS-管理栏:悬停

我正在尝试在管理栏上设置按钮的样式。效果很好，但是有一些缺陷。

此按钮位于管理栏上，并带有文本“维护”。单击按钮后，jQuery将向其添加类.flicker。



我想要按钮执行的操作是这样的；一旦应用.flicker，就不应有悬停效果。但是，如果未应用.flicker类，则悬停效果应为默认设置（蓝色文本和灰色背景）。

这是HTML：

<ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
        <li id="wp-admin-bar-wpmaintenance" class="wpmaintenance-icon"><a class="ab-item" href="#"><span class="ab-icon"></span><span class="ab-label">Maintenance</span></a></li>
</ul>

使用以下默认WordPress CSS：

#wpadminbar .ab-top-menu>li.hover>.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus {
    background: #32373c;
    color: #00b9eb;
}

用我自己的CSS：

.flicker, .flicker:hover {
    -webkit-animation: flickerAnimation 2s infinite;
    -moz-animation: flickerAnimation 2s infinite;
    -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}

有什么办法可以做到这一点？我希望有人能帮助我。

最佳答案

您可以尝试将hover事件设置为.flickler类样式并将其设置为默认样式，使用！important将覆盖其他hover语句

.flicker:hover{
    background: #32373c !important;
    color: #00b9eb !important;
}

关于jquery - CSS-管理栏:悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42342955/