Capturing ‘Lost focus’ or ‘blur’ event for div, li or other non-input elements in Jquery

I was working on ‘ul-li’ structure in which I wanted to 
  1. show 2nd li when 1st li is focused and 
  2. hide it when 1st lose focus. 
I tried with ‘focus’ and ‘blur’ events, but ‘blur’ event was not being called for li element. Searching for answer on internet, I came to know that blur or lost focus event is fired when it’s an input element!

So I went for a work around that uses ‘mouseenter’ and ‘mouseleave’ events for ‘focus’ and ‘blur’ events respectively. This events can be used for ‘li’, ‘a’ as well as ‘div’ elements. IE7, 8, 9, Chrome and Firefox support these events. Below is the code that I have used.

$("#myFirstLiElement").mouseenter(function () {
              $("#mySecondLiElement").show();
       }).mouseleave(function () {      
              $("#mySecondLiElement").hide();
 });

0 comments:

Post a Comment