Question

I have many <div> tags separate from each other. They all have this layout:

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Green"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Black"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Red"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="White"/>
    </div>
</div>

Am wanting to get the "alt" attribute of the <img> when the swatchimgouter div is hovered. This event fires fine when hovered:

$("#variations div.swatchimgouter").mouseover(function () {

}

I’ve tried many combinations of selectors, but none of them are giving me access to the <img> attributes. Since there are many of these div tags with a class of swatchimgouter, and the one I want is the one that triggers the above mouseover event, do I use this somehow to get to the img? Something like:

var previewColor = $('div.swatchimginner img', this).attr('alt');

Answer 1

Im not to sure what you have tried but your example is more or less working for me:

$("#variations div.swatchimgouter").mouseover(function () {
    var previewColor = $('img', this).attr('alt');
    alert(previewColor);
});

demo: http://jsfiddle.net/JtQfh/