On Click Of An ''a'' Element, Fire It's Hover Handler Instead Of Going To The Link

I am working with a CMS that doesn't allow me much to do in terms of editing their code. I have this element: ).on( 'click', function( ev ){ ev.preventDefault(); // stop click event $( this ).trigger( 'hover' ); } );

Solution 2:

You can certainly prevent the default action of clicking and trigger the hover event instead, but I wouldn't recommend it due to accessibility and usability concerns.

$('a').click(function(e) {
    e.preventDefault();
    $(this).trigger('hover');
});

(Here I'm using a as the selector but you probably want to be way more specific as to which links you are selecting.)

If the current hovering effect is done via CSS :hover pseudo-class, this will not have the desired outcome.

Solution 3:

Use the below script and trigger hover event

$( '.menu_icon' ).click(function(){
 $(this).trigger('hover');
 returnfalse;
});