j查询悬停在第二个函数(鼠标输出)上的问题

Question

鼠标

输出时遇到 .hover（） 问题。似乎不起作用。它适用于淡入，但不适用于淡入。我基本上在它上面的另一个图像中褪色。"克隆"有一个较低的 z 指数开始，我将其向前移动，然后在悬停时淡入。两个图像都是堆叠的。

小提琴：http://jsfiddle.net/C6AfM/

JavaScript：

$.fn.hoverImage = function() {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function() {
        var img = $(this);
        var magnifyImage = img.next();
        //hover: first function is for mouseover, second is 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);
        });
    });
}

该 HTML：

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

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

Answer 1

问题是由于克隆出现，鼠标离开不会在原始映像中触发，而是由克隆触发的

$.fn.hoverImage = function() {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function() {
        var img = $(this);
        var magnifyImage = img.next();
        console.log(magnifyImage);
        //hover: first function is for mouseover, second is on mouseout
        img.add(magnifyImage).hover(function() {
            magnifyImage.css("z-index", 2).animate({
                opacity:0.8         
            }, 200);
        }, function() {
            magnifyImage.css('opacity', 0);
        });
    });
}

演示：小提琴

---

或者使用指针事件 - IE9+

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

演示：小提琴