Почему не работает селектор jQuery?

Question

Я пишу простой скрипт, который заменяет два изображения. Первый поменяется в порядке, но второй по какой-то причине не срабатывает. Это должно быть что-то простое, что мне не хватает. Может быть, селектор «div.singleTint img»? Может кто-нибудь взглянуть и проверить мою работу?

Вот мой HTML:

<div id="beerGlassOverlay"> 
    <img src="<?php bloginfo('template_directory'); ?>/images/beerOverlay.png" class="glassreplace"> 
</div> 

<li class="image-rollover"> 
    <a href="http://brasco.co/Mims/meet-the-breweries/miller-beers/" target="_blank"> 
     <img width="177" height="186" src="http://brasco.co/Mims/wp-content/uploads/2012/05/miller1.png" class="attachment-full wp-post-image" alt="miller" title="miller" /> 
    </a> 
    <div class="singleTint"> 
     <img width="279" height="524" src="http://brasco.co/Mims/wp-content/uploads/shrekBeer.png" class="attachment-full" alt="shrekBeer" title="shrekBeer" /> 
    </div><!-- End singleTint--> 
</li> 

Вот мой JQuery:

$('li.image-rollover').mouseover(function() { 
$('img.glassreplace').attr({//Change the src and size info on hover   
    src: ('div.singleTint img', this).src, 
    width: '100%', 
    height: '100%' 
    }); 
});` 

Answer 1

изменить это:

src: ('div.singleTint img', this).src, 

к:

src: $('div.singleTint img', this).attr('src'), 

Answer 2

src: ('div.singleTint img', this).src, должен стать src: $('div.singleTint > img', this).attr("src"),

(Я добавил селектор ребенка - >)

Answer 3

Вы не нашли ссылку на объект JQuery на третьей строке код ($)?

$('li.image-rollover').mouseover(function() { 
$('img.glassreplace').attr({//Change the src and size info on hover   
    src: $('div.singleTint img', this).src, //Added the jQuery object in front of the parenthesis. 
    width: '100%', 
    height: '100%' 
    }); 
});