Is there a way to change the color of a link to orange when it's hovered over?
On mobile devices, the link should turn orange when touched and stay that way until the user clicks away. I'd like to manually trigger the mouseout event to remove the hover effect after 1 second.
I attempted the following code but the link remains orange even after 1 second:
$(window).on('load', function() {
$('a').on('click', function() {
// For mobile devices, I want to stop the hover effect after 1 second
window.setTimeout(function() {
$('a').trigger('mouseout');
}, 1000);
});
});a {
font-size: 2rem;
}
a:hover {
color: orange;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href='#'>Test</a>
</div>Please note: this is just an example. In my actual code, I need to trigger the mouseout event on ajaxcomplete instead of using a timer.
$(document).on('ajaxComplete', function () {
$('a').trigger('mouseout');
});