title: Use jquery to set onfocus event for only img in <a</a> tags
body: <p>I have this piece of code : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;p class="demo"&gt;test &lt;/p&gt;
  
          &lt;a href="xx" class="focusme"&gt;
              &lt;img src="images/testimage.gif" alt="" &gt;
          &lt;/a&gt;
  
          &lt;a href="xx" class="focusme"&gt;
              &lt;img src="images/testimage.gif" alt=""&gt;
          &lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="js/jquery.2.1.4.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(function () {     
              $(".focusme").focus(function(){
                  $(this).img.invert();
              });
      });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to do is to invert the images when the <code>&lt;a&gt;</code> tag got focus, but I'm stuck to register the <code>focus</code> and <code>blur</code> event for them.</p>
  
  <p>Here is what I'm trying to achieve : </p>
  
  <p>for example, the html : </p>
  
  <pre><code>        &lt;a href="xx" class="focusme"&gt;
              &lt;img src="images/testimage.gif" alt="" id="img1"&gt;
          &lt;/a&gt;
  </code></pre>
  
  <p>So at this point, it's easy to access the img above because it has an ID : </p>
  
  <pre><code>$("#img1").invert(); 
  </code></pre>
  
  <p>but what i want is : </p>
  
  <pre><code>        $(function () {     
              $(".focusme").focus(function(){
                  var img = $(this).img; 
                  img.invert(); 
              });
      });
  </code></pre>
  
  <p>P/s :  the invert() function is from a seperated js file, and is working well if I manually call it like this : </p>
  
  <pre><code>$("#img1").invert(); 
  </code></pre>
  
  <p>How can this be done? </p>