我在页面上有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]
答案 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');
});
}