last day (14 days later) » 

12:38 AM
0
A: How do I hide 'this' image on hover using jQuery?

Ehsan Sajjadyou have to do like this: $("a.project_link").hover(function () { $(this).find(".Image").hide(); $(this).next(".info_overlay").show(); }, function () { $(this).find(".Image").show(); $(this).next(".info_overlay").hide(); }); FIDDLE EXAMPLE

 
fmz
Ehsan, thanks for the quick reply. The next() option works best. Is there a way to have the image come back when I mouse out?
 
you have to write another event
see edited post
 
fmz
It is not quite right. Please see the page: rouviere.net/our-work
 
where have you implemented this on page?
 
fmz
Please see lines 80-85
 
12:38 AM
unable to find it please provide a proper fiddle
@fmz found replace $(this).find(".image").hide(); with $(this).find("img").hide();
 
fmz
@EhsanSajjad That helped. I made another small modification. It should be img, not .img. That helps, but now it flickers and does not display the div content.
 
it is because you are using img tag in anchor anf anchor tage does not have its own text so when image is hidden anchor tag blur event fires
if you see my fiddle example i have added text for anchor dummy text to make it work
 
fmz
I solved the blinking problem. I made the anchor tag, display: block.
However the info_ div does not show.
 
by just setting it block makes it work fine?
 
fmz
sorry to take so much of your time.
I am fairly new to jQuery
 
12:46 AM
actually the posted html is different than your original so
thats the reason
for problem
coming
instead of hiding image hide complete an ``$(this).hide()
*anchor tag
 
fmz
I don't fully understand that last sentence.
 
instead of hiding image inside anchor tag hide whole anchor tag but i think that will not work coz call back function of hover will be fired
i suggest you to seperate image from anchor tag
 
fmz
Should I just remove the anchor tag completely?
 
not that will not make any difference i think
 
fmz
The image is hiding and showing fine now. It is just the info_overly div that is not showing.
 
1:03 AM
you want show image on which event?
 
fmz
The image is doing fine now. It shows when the page loads and hides when I mouse over it, and it shows again when you mouse out.
The info_overlay show show when the image is hidden.
should show
 
and change anchor tag display to inline
 
fmz
That works. Thank you very much for you time. You have been very patient and helpful.
 
wlecome ..:)
you can also use this:
$(".project").mouseleave(function(){

$(this).find("img").show();
$(this).find(".info_overlay").hide();

})
 

last day (14 days later) »