Question

嗨希望有人可以帮我这个我希望图片隐藏并显示在鼠标悬停时....所有div都有相同的类，它切换的图片具有相同的类以及示例：


/usr/local/rvm/bin/rvm default do bundle exec sidekiq --index 0 --pidfile /home/deployer/fruby/shared/tmp/pids/sidekiq.pid --environment production --logfile /home/deployer/fruby/shared/log/sidekiq.log --config /home/deployer/fruby/current/config/sidekiq.yml --daemon

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

这是我在jquery中所做的事情

<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>

唯一的问题是它们有多个并且所有这些都在同一时间显示和隐藏而超过一个...我只想要鼠标结束的那个隐藏和显示等等...... / p>

我对jquery很新，希望这有意义

Here's我想做的样本在LATEST RELEASES和SNEAKY PEAKS标题下

感谢

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的例子是here

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

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

然后你不需要两个不同的图像（颜色和b＆amp; w），你也不需要javascripts。 JSFiddle是here。

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

jquery显示和隐藏图片

5 个答案: