Geek Answers Handbook

Is it possible to trigger a click event on hover?

General javascript is a question here, which will also know well how (if possible) to do in jquery.

Can you trigger a click event when you hover over an item?

I know that people will ask why, but please just humor me.

Thanks a lot, C

+6
javascript jquery
source share
8 answers

Take a look at the trigger function:

$(someElement).trigger('click');
+11
source share

Just use click ()

 $(selector).click();

Or else, just translate the click() code into a generic function and call it from hover() .

+4
source share

Pretty simple:

 $(selector).mouseenter(function() { $(this).click() });
+4
source share
 $('myselector').hover(function(){ $(this).trigger('click'); });

EDIT: later than the message, but just to illustrate how to add a handler and run it.

 $('myselector').on('click',function(){ // handle click event, put money in my bank account }).on('mouseenter',function(){ $(this).trigger('click'); // only on enter here // handle hover mouse enter of hover event, put money in my bank account }).on('mouseleave',function(){ // handle mouse leave event of hover, put money in my bank account }).trigger('click');

Just need it once?

 $('myselector').on('click',function(){ // handle click event, put money in my bank account }).one('mouseenter',function(){ $(this).trigger('click'); // only on enter here once // handle hover mouse enter of hover event, put money in my bank account }).on('mouseenter',function(){ // handle hover mouse enter of hover event, put money in my bank account }).on('mouseleave',function(){ // handle mouse leave event of hover, put money in my bank account });
+2
source share
 $('#selector').bind('mouseover',function(){ /*DO WHAT YOU WANT HERE*/ });

which should do the trick

0
source share

jQuery can call 'click' the whole object except the tag

try this code on the console and see what happens on this page

 $('a').bind('mouseover', function(){ $(this).trigger('click'); console.log('hover'); // let me know when it hovering <a> });
0
source share

You can fire the click event on hover.

Try the following example:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hover + (mouseup/mousedown, click) demo</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p class="up">Press mouse and release here.</p> <p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p> <p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p> <p class="hover3">Press mouse and release here. HOVER.CLICK</p> <script> $( "p.up" ) .mouseup(function() { $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" ); }) .mousedown(function() { $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" ); }); $( "p.hover1" ) .hover( function() { $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" ); }, function() { $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" ); }) .mouseup(function() { $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" ); }) .mousedown(function() { $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" ); }); $( "p.hover2" ) .hover( function() { $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" ); }, function() { $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" ); }); $( "p.hover2" ) .mouseup(function() { $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" ); }) .mousedown(function() { $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" ); }); $( "p.hover3" ) .hover( function() { $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" ); }, function() { $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" ); }); $( "p.hover3" ) .click(function() { $( this ).append( "<span style='color:#00f;'>CLICK.</span>" ); }); </script> </body> </html>
0
source share

You might also want to add a hover delay so that it doesn't get called right away. Delay will be useful if you intend to use it in the thumbnail list.

 var hoverTimer; var hoverDelay = 200; $('.classSelector').hover(function() { var $target = $(this); // on mouse in, start a timeout hoverTimer = setTimeout(function() { // do your stuff here $target.trigger('click'); }, hoverDelay); }, function() { // on mouse out, cancel the timer clearTimeout(hoverTimer); });
0
source share

More articles:


All Articles