CODEWITHSUNDEEP
jqueryeventsfocushover
halna frédéric
halna frédéric

Reputation: 238

jQuery combining focus and hover

I am trying to use focus event on list element. it's working with hover, but not with focus! Do you have a idea ?

$('#main-menu ul.rubriques li')
.hover(function() {
$(this).addClass('active').find('ul').show();                    
})
.focus(function() {
$(this).addClass('active').find('ul').show();                    
});

i try to modify my code: and find the solution ;) ;) ;)

  $('#main-menu ul.rubriques li a')
.hover(function() { $(this).parent().addClass('active').find('ul').show();                   
})
.focus(function() { $(this).parent().addClass('active').find('ul').show();                   
});

thanks ! everybody !

Upvotes: 3

Views: 14887

Answers (6)

Geoff Appleford
Geoff Appleford

Reputation: 18832

Only inputs, textareas and anchors can get focus.

Also, you're missing a ) after the hover() part

$('#main-menu ul.rubriques li').hover(function() {
    $(this).addClass('active').find('ul').show();                    
}).focus(function() {
    $(this).addClass('active').find('ul').show();                    
});

Update - as pointed out by @vittore, li's can get focus if you assign a tab-index

Upvotes: 2

halna frédéric
halna frédéric

Reputation: 238

I try to modify my code: and find the solution ;) ;) ;)

  $('#main-menu ul.rubriques li a')
.hover(function() { $(this).parent().addClass('active').find('ul').show();                   
})
.focus(function() { $(this).parent().addClass('active').find('ul').show();                   
});

thanks ! everybody !

Upvotes: 0

Desi
Desi

Reputation: 375

Focus is a function that you use only on form elements like input field for example, if I remember rightly.

http://api.jquery.com/focus/

What are you trying to do?

If you waht to do something with the li element use;

$('#main-menu ul.rubriques li').hover(function() {
  $(this).addClass('active').find('ul').show().css({'border':'1px solid #ff2200','background-color':'#ffcc00'});
});

You can change the colors to whatever you want. That's your best alternative.

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

You can also bind both events at once:

$('#main-menu ul.rubriques li').bind('hover focus', function() {
    $(this).addClass('active').find('ul').show();                    
});

But like michelgotta says the focus is unlikely to work on an li except in some circumstances - http://api.jquery.com/focus/

Upvotes: 2

vittore
vittore

Reputation: 17579

you need to change the way you assign handler as Geoff supposed, also you will need to explicitly set tab-index attribute for you list items in order to allow them fire focus event

Upvotes: 0

michelgotta
michelgotta

Reputation: 1001

Focus is for <input/> elements and <a/> links...

Upvotes: 4

Related Questions