Question

我有6张图片，在悬停时，每张图片都会被另一张淡出的图片（使用jQuery）取代并获得初始图片。

问题在于，当图像淡出时，它会在原始图像下面而不是在它上面。

由于淡入/淡出效果很好，我认为这个问题属于我的css代码：

CSS：

#puzz {
    border-color:#000000;
    background-color:#00CC33;
    position:fixed;
    left:20%;
    top:13%;
    width:900px;
    height:650px;
}
li {
    list-style:none;
    float:left;
    list-style:none;
    padding:8px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    background:#99CCFF;
    /*For IE9 compatibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
}
.fade div {
    position:absolute;
    top:auto;
    left:auto;
    display: none;
}

HTML：

<div id="puzz">
    <ul>
        <li>
            <div class="fade"><img src="img7.jpg" />
                <div><img src="img8.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img2.jpg" />
                <div><img src="img5.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img3.jpg" />
                <div><img src="img4.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img4.jpg" />
                <div><img src="img3.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img5.jpg" />
                <div><img src="img2.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img6.jpg" />
                <div><img src="img1.jpg" /></div>
            </div>
        </li>
    </ul>
</div>

这是我得到的：

enter image description here

修改

这是我使用的jQuery脚本：

$(document).ready(function () {
    // find the div.fade elements and hook the hover event
    $('div.fade').hover(function () {
        // on hovering over, find the element we want to fade *up*
        var fade = $('> div', this);    

        // if the element is currently being animated (to a fadeOut)...
        if (fade.is(':animated')) {
            // ...take it's current opacity back up to 1
            fade.stop().fadeTo(250, 1);
        } else {
            // fade in quickly
            fade.fadeIn(250);
        }
    }, function () {
        // on hovering out, fade the element out
        var fade = $('> div', this);
        if (fade.is(':animated')) {
            fade.stop().fadeTo(3000, 0);
        } else {
            // fade away slowly
            fade.fadeOut(30);
        }
    });
});

Answer 1

Here's your code (jsFiddle)，修复了您的问题。

我刚刚在CSS中进行了一些更改，将图像置于另一个“上方”。

Answer 2

如果您使用的是position:absolute，则需要在父元素position:relative上指定<li>，以便原点匹配。您还应在已定位的项目中指定top:0; left:0;

淡出图像不会越过淡出图像

2 个答案: