javascript - jQuery hover issue on second function (mouseout) -

having issue .hover() on mouse'ing out. doesn't seem work. works on fade in, not out. fading in image on top of it. 'clone' has lower z-index start, , bring forward , fade in on hover. both images stacked.

the fiddle: http://jsfiddle.net/c6afm/

the javascript:

$.fn.hoverimage = function() {     //add event handler each image (otherwise add same event handler images @ once)     this.each(function() {         var img = $(this);         var magnifyimage = img.next();          //hover: first function mouseover, second on mouseout         img.hover(function() {             magnifyimage.css("z-index", 2).animate({                 opacity:0.8                      }, 200);         }, function() {             magnifyimage.css("z-index", -200).animate({                        opacity:0                     }, 200);         });     }); } 

the html:

<span class="img-span">                                     <img src="(url)" class="project-img">                                                                         <img src="(url)" class="project-img-clone">                                                                         <figcaption>caption</figcaption> </span> 

the css:

.img-span {     width:27.08333333333333%; /* 260 / 960 */     margin-right:3.009259259259259%; /* 26 / 864 */     display:inline-block;     vertical-align: top;      position:relative; }  .project-img {     max-width:100%; }  .project-img-clone {     position:absolute;     top:0;     left:0;     max-width: 100%;     z-index:-200;     opacity:0; } 

the problem since clone appearing mouseleave not firing in original image, fired clone

$.fn.hoverimage = function() {     //add event handler each image (otherwise add same event handler images @ once)     this.each(function() {         var img = $(this);         var magnifyimage = img.next();         console.log(magnifyimage);          //hover: first function mouseover, second on mouseout         img.add(magnifyimage).hover(function() {             magnifyimage.css("z-index", 2).animate({                 opacity:0.8                      }, 200);         }, function() {             magnifyimage.css('opacity', 0);         });     }); } 

demo: fiddle

---

or use pointer-events - ie9+

.project-img-clone {     position:absolute;     top:0;     left:0;     max-width: 100%;     z-index:-200;     opacity:0;     pointer-events: none; } 

demo: fiddle