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的新手，希望这有意义

这是我想在最新发布和偷偷摸摸的峰值下做的一个示例

谢谢

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

Answer 2

您只需要使用this 。 在您的方法中，第一类将每次拾取，并this发生当前元素事件。 this是对调用当前函数的成员的引用

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



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

Answer 3

您正在提供通用解决方案。 你应该特别使用this这种方式：

$(document).ready(function() {   
    $(".imagesbw").mouseover(function(){
        $(this).hide();
    })
    $(".imagescol").mouseout(function(){
        $(this).prev(".imagesbw").show();
    });
});

更新：甚至看到Satpal都给出了相同的答案！ :)

Answer 4

代码更改：

$(document).ready(function() {
  // hide all bw images (you can also do this by css - display:none)
  $('.imagesbw').hide();

  // on mouseover event - hide current color image and show b&w image
  $(".imagescol").mouseover(function(){
     $(this).hide();
     $(this).prev().show();
  });

  // on mouseout event - hide current b&w image and show color image
  $(".imagesbw").mouseout(function(){
     $(this).hide();
     $(this).next().show();
  });
});

您的示例的JSFiddle 在这里

您也可以通过仅使用CSS来达到相同的效果

.imagescol:hover {
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
}

然后，您就不需要两个不同的图像（彩色和黑白），也不需要JavaScript。 JSFiddle在这里 。

Answer 5

您必须在这种情况下使用此

$(document).ready(function() {   
$(".imagesbw").mouseover(function(){
    $(this).hide();
})
$(".imagescol").mouseout(function(){
    $(this).parent().find(".imagesbw").show();
});

}）

http://plnkr.co/edit/1vDNHnaRKkAIfxhzSr3e?p=preview