jquery show and hide pictures

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

also, as a suggestion i think you can achieve that effect using css grayscale filter — Andrei Terecoasa, Aug 19 '15 at 07:57

Satpal · Accepted Answer · 2015-08-19T07:56:44.757

5

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

edited Aug 19 '15 at 07:56

answered Aug 19 '15 at 07:52

Satpal

132,252
13
159
168

Yep. Check this out too if you are new to jQuery/JavaScript http://stackoverflow.com/questions/6749634/jquery-what-does-this-exactly-mean. – Drumbeg Aug 19 '15 at 07:54
You are just very faster than me in a 30 sec gap! `:)` – Praveen Kumar Purushothaman Aug 19 '15 at 07:55
1

with small interval of time. :p three answers – Manoj Dhiman Aug 19 '15 at 07:56

Manoj Dhiman · Answer 2 · 2015-08-19T08:00:54.863

0

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

edited Aug 19 '15 at 08:00

answered Aug 19 '15 at 07:53

Manoj Dhiman

5,096
6
29
68

Just to be picky, `this` isn't an event. – Drumbeg Aug 19 '15 at 07:57

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

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! :)

edited May 23 '17 at 12:21

Community

1
1

answered Aug 19 '15 at 07:54

Praveen Kumar Purushothaman

164,888
24
203
252

tuffkid · Answer 4 · 2015-08-19T08:21:08.360

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.

score 0 · Answer 5 · answered Aug 19 '15 at 08:31

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

jquery show and hide pictures

5 Answers5