CODEWITHSUNDEEP
javascriptjquery
Aero Wang
Aero Wang

Reputation: 9217

How to use javascript to select (a) child(ren) element(s) of a hovered element?

assuming I have a (very large) div tag and inside the div tag I have a (normal size) button, now I want to be able to create a shortcut that if a user is hovering over the div tag, they can press return key to click the button.

$(window).keypress(function(e){
  if (e.keyCode == xxx) {
    $('div').hover(function(){
      $('this button').click();
    });
  }
});

This is how I imagine it might look like in jQuery (didn't work obviously). I am open to suggestions. jQuery solutions are fine, plain javascript solutions are even better.

Upvotes: 1

Views: 51

Answers (3)

James Wayne
James Wayne

Reputation: 1912

It's actually pretty easy.

$(window).keypress(function(e){
  if (e.keyCode == xxx) {
    $('div:hover button').click();
  }
});

Don't use .hover() or .on('hover') because they are simply not selectors.

Upvotes: 1

user488187
user488187

Reputation:

Rather than checking for hover on every keypress, you're better off reversing the order of event checking so that you only incur the keypress overhead while the user is hovering. Something like:

function checkKeypress(e) {
    // Check keypress and perhaps do something
}
$('div').hover(
    function(){
        $(window).keypress(checkKeypress);
    },
    function() {
        $(window).off('keypress', checkKeypress);
    }
);

Upvotes: 0

James Montagne
James Montagne

Reputation: 78630

You can use .is(":hover") within your keypress handler to determine if the proper div is being hovered:

$(window).keypress(function(){
    if($("#target").is(":hover")){
       alert("pressed!"); 
    }
});

http://jsfiddle.net/y7joukzw/2/ (NOTE: Make sure you click within the "result" frame to ensure it is the active frame when testing the jsfiddle)

Upvotes: 1

Related Questions