jquery - Fade other elements when one is focussed -

i have list of items fade when 1 of them has keyboard focus. 1 keyboard focus should not faded.

i've done similar thing hover , achieved so:

// recede other locations when 1 hovered.  $('li').hover(    function () {     $('li:not(:hover)').addclass('recede');   },   function () {     $('li').removeclass('recede');   } ); 

however, best attempt @ similar .focus() isn't working...

// recede other locations when 1 focussed. $('li').focus( function () {   if (!$('li').is(":focus")) {     $location_item_no_touch.addclass('recede');     } });  $('li').blur( function () {   $('li').removeclass('recede'); }); 

i've tried few different approaches, seems difficult item :focus not add .recede class. ideas i'm going wrong?

try this:

// recede other locations when 1 focussed. $('li').focus( function () {     $('li').removeclass('recede');     $(this).addclass('recede');   });  $('li').blur( function () {   $('li').removeclass('recede'); }); 

i suppose .recede applying fade need.