Never forget focus and blur

A lot of us are so proficient in using our electronic mouse that we forget that others are not so fortunate. Not everyone has finely tuned motor skills enabling swift mouse movement over the screen. Remember blur and focus events for those that cannot use a mouse.

/*** fade buttons on hover ***/ $('.js-hover').hover(function() { $(this).fadeTo("fast", 0.75); }, function() { $(this).fadeTo("fast", 1); }); /*** end fade hover ***/

A handbag size bag made out of keys from a keyboardThe above code produces a hover effect for a button. When a user moves a mouse pointer within the button, the button fades by 25%. The button changes back to its original transparency once our mouse pointer leaves the button area. The above piece of code is incorrectly written and has forgotten our blur and focus events for our keyboard users. What we need to do is change our code to include both functionality.

$('.js-hover').bind('focus mouseover', function() { $(this).fadeTo('fast', 0.75); }); $('.js-hover').bind('blur mouseout', function() { $(this).fadeTo('fast', 1); });

As you can see we have swapped our hover event for a mouseover and mouseout event. Combined with our mouse events are our keyboard events, focus and blur. Our code now has all our necessary events and will work when a user points a mouse within our button and also if a user tabs to the button with a keyboard.