jQuery显示和隐藏图片

Question

Hi hope someone can help me with this i want pictures to hide and show when hovering over them.... all divs have the same classes and the pictures it toggles has the same classes aswell example:

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

so there a black and white picture above a color picture..i want to mousein over one of them and hid that one to show the one behind...

Heres what i did in jquery

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



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

Only problem is that there are multiple of them and all of them show and hide at the same time while over one... i just want the one the mouse is over to hide and show and so on....

im new to jquery hope this make sense

Here's a sample of what i want to do under the heading LATEST RELEASES and SNEAKY PEAKS

thanks

Answer 1

Execute the code using this context, In the event handler this refers to element which invoked the event.

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

you just need to use this . In you method the first class will pickup every time and with this the current element event will occur . this is a reference to the member that invokes the current function

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



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

Answer 3

You are providing a generic solution. You should be particular to use this this way:

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

Update: Just saw even Satpal has given the same answer! :)

Answer 4

Changes in your code:

$(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 for your example is here

You can also achieve the same effect by using css only

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

Then you don't need two different images (color and b&w) and you also don't need javascripts. JSFiddle is here .

Answer 5

you have to use this in this scenario

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

})

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