Как выбрать определенный div с помощью цепочек селекторов jQuery

Question

У меня есть 10 div на странице, и все div имеют одинаковые классы "hoverable", "contentDescription" и теги привязки в div. Когда я наведите курсор мыши на теги привязки, я хочу, чтобы изображение, находящееся внутри тега привязки, изменилось. Используя нижеприведенную функцию, хотя изображение меняется только для hovered div, на вкладке firebug .net я мог видеть все div, пытающиеся загрузить «orangeLock.gif». Любые входные данные о том, как сделать только в данный момент зависший div, чтобы загрузить другую иконку, внеся некоторые незначительные изменения, используя jQuery, для кода ниже?

    <div onmouseout="hideHover()" onmouseover="showHover(this)" class="relContainer hoverable" style="width: 710px; height: 140px; opacity: 1; display: block; background-color: rgb(255, 255, 255);">
    <div class="thumbContainer"></div>
    <div class="contentDescription">
    <h2><a rel="doNothing" href="">Washington DC<img src="/images/lock.gif" name="a164a428047d96046a22db3373f057340"></a></h2></div>
    </div> 



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]

Answer 1

Попробуйте

function showHover(div){ 
   jQuery('.hoverable .contentDescription a').mouseover(function(ev) {        
               jQuery(ev.target).find('img').attr('src', '/images/orangeLock.gif');
        }).mouseout(function(ev){
             jQuery(ev.target).find('img').attr('src', '/images/lock.gif');
        }); 

}