Select img within multiple div on div MouseOver
<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>
