After successfully styling a button on the admin bar, I noticed a few imperfections in the implementation.
The button in question is situated on the admin bar and is labeled "maintenance". Upon clicking the button, jQuery triggers the addition of the class .flicker to it.
https://i.sstatic.net/AizAd.gif
Here's what I aim to achieve with the button; when the .flicker class is applied, I want any hover effect to be disabled. However, if the .flicker class is absent, the default hover effect (blue text with a gray background) should remain.
Below is the HTML code:
<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>
Applying the default 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;
}
Alongside my custom CSS:
.flicker, .flicker:hover {
-webkit-animation: flickerAnimation 2s infinite;
-moz-animation: flickerAnimation 2s infinite;
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
I'm curious if there's a solution to achieve this desired functionality. Hopefully, someone can provide some guidance and assistance.