title: Select img within multiple div on div MouseOver
body: <p>I have many <code>&lt;div&gt;</code> tags separate from each other. They all have this layout:</p>
  
  <pre><code>&lt;div class="swatchimgouter"&gt;
      &lt;div class="swatchimginner"&gt;
          &lt;img src="myimage.jpg" alt="Green"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="swatchimgouter"&gt;
      &lt;div class="swatchimginner"&gt;
          &lt;img src="myimage.jpg" alt="Black"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="swatchimgouter"&gt;
      &lt;div class="swatchimginner"&gt;
          &lt;img src="myimage.jpg" alt="Red"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="swatchimgouter"&gt;
      &lt;div class="swatchimginner"&gt;
          &lt;img src="myimage.jpg" alt="White"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am wanting to get the <code>"alt"</code> attribute of the <code>&lt;img&gt;</code> when the <code>swatchimgouter</code> div is hovered. This event fires fine when hovered:</p>
  
  <pre><code>$("#variations div.swatchimgouter").mouseover(function () {
  
  }
  </code></pre>
  
  <p>I've tried many combinations of selectors, but none of them are giving me access to the <code>&lt;img&gt;</code> attributes. Since there are many of these <code>div</code> tags with a class of swatchimgouter, and the one I want is the one that triggers the above mouseover event, do I use <code>this</code> somehow to get to the img? Something like:</p>
  
  <pre><code>var previewColor = $('div.swatchimginner img', this).attr('alt');
  </code></pre>