javascript - jquery显示和隐藏图片

Question

嗨，希望有人能帮我解决这个问题，我希望图片在鼠标悬停时隐藏和显示....所有 div 都有相同的类，它切换的图片也有相同的类，例如:

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

所以在彩色图片上方有一张黑白图片..我想将鼠标悬停在其中一张上并隐藏那张以显示后面的那张...

这是我在 jquery 中所做的

$(document).ready(function() {   
  $(".imagesbw").mouseover(function(){
  $(".imagesbw").hide();



  })
    $(".imagescol").mouseout(function(){
  $(".imagesbw").show();
});
})

唯一的问题是它们有多个，并且它们都同时显示和隐藏，而超过一个...我只想让鼠标悬停的那个隐藏和显示等等....

我是 jquery 的新手，希望这是有道理的

Here's我想做的一个例子 在最新版本和偷偷摸摸的峰值标题下

谢谢

Answer 1

使用 this 上下文执行代码，在事件处理程序中 this 引用调用事件的元素。

$(document).ready(function() {   
    $(".imagesbw").mouseover(function(){
        $(this).hide();
    })
    $(".imagescol").mouseout(function(){
        //Here use the prev() method in conjection with this 
        $(this).prev(".imagesbw").show(); 
    });
})