On click of an ''a'' element, fire it's hover handler instead of going to the link

Question

I am working with a CMS that doesn't allow me much to do in terms of editing their code.

I have this element:

<a href="/development/tomato_site/" title="SampleTitle"
 class="menu_icon menu-641 sf-depth-1 menuparent" > Tomatos </a>

When hovering over this link something pops up which is set through the CMS.

I want on clicking the element, the hover event to happen instead of going to the actual href link.

Is this possible to do via jQuery? Maybe dispatch a click event as a hover event?

You can dispatch events and do a lot of other things, but first you'll have to find out what exactly is triggering this pop up, is it CSS, javascript, jQuery etc — adeneo, Aug 08 '14 at 17:54
So I cannot just simulate a hover event when clicking on the element? — nicholaswmin, Aug 08 '14 at 17:54

score 2 · Answer 1 · answered Aug 08 '14 at 17:54

2

jQuery:

$( 'whatever selects your link' ).on( 'click', function( ev ){
    ev.preventDefault(); // stop click event
    $( this ).trigger( 'hover' );
} );

answered Aug 08 '14 at 17:54

score 2 · Accepted Answer · answered Aug 08 '14 at 17:55

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.

I am wondering what will happen on an ipad when the user clicks on the element... — nicholaswmin, Aug 08 '14 at 17:56

score 0 · Answer 3 · answered Aug 08 '14 at 17:58

0

Use the below script and trigger hover event

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

answered Aug 08 '14 at 17:58

karan3112

1,867
14
20

On click of an ''a'' element, fire it's hover handler instead of going to the link

3 Answers3

Linked