如何通过链接jQuery选择器来选择特定的div

时间:2011-10-14 19:51:31

标签: jquery-selectors

我在页面上有10个div,并且所有div在div中都有相同的类“hoverable”,“contentDescription”和锚标签。当我将鼠标悬停在锚标签上时,我希望锚标记内的图像发生变化。通过使用下面的功能虽然图像仅为悬停的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]

1 个答案:

答案 0 :(得分:0)

尝试

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');
        }); 

}