title: How to select a particular div by chaining jQuery selectors
body: <p>I have 10 divs on a page and all the divs have same classes "hoverable", "contentDescription" and anchor tags within the divs. When I mouse hover on the anchor tags I want the image that is within the anchor tag to change. By using the below function though the image changes only for the hovered div, from firebug .net tab I could see all the divs trying to load the "orangeLock.gif". Any inputs on how to make only the currently hovered div to load a different icon making some minor changes using jQuery to the code below?</p>
  
  <pre><code>    &lt;div onmouseout="hideHover()" onmouseover="showHover(this)" class="relContainer hoverable" style="width: 710px; height: 140px; opacity: 1; display: block; background-color: rgb(255, 255, 255);"&gt;
      &lt;div class="thumbContainer"&gt;&lt;/div&gt;
      &lt;div class="contentDescription"&gt;
      &lt;h2&gt;&lt;a rel="doNothing" href=""&gt;Washington DC&lt;img src="/images/lock.gif" name="a164a428047d96046a22db3373f057340"&gt;&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;
      &lt;/div&gt; 
  
  
  
  function showHover(div){ 
         jQuery('.hoverable .contentDescription a').mouseover(function() {        
                     jQuery(this).find('img').attr('src', '/images/orangeLock.gif');
              }).mouseout(function(){
                   jQuery(this).find('img').attr('src', '/images/lock.gif');
              }); 
  
      }
  
  ![trying to load orangelock image][1]
  </code></pre>