0

私は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>

これが私が得るものです：

ここに画像の説明を入力してください

編集：

これが私が使用する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);
        }
    });
});
4

2 に答える 2

2

これがあなたのコード（jsFiddle）で、問題は修正されています。

CSSにいくつかの変更を加えて、画像を他の画像の「上」に配置しました。

于 2012-09-21T16:03:28.603 に答える
0

を使用している場合は、原点を一致させるために親要素でposition:absolute指定する必要があります。配置されたアイテムでも指定する必要がありますposition:relative<li>top:0; left:0;

于 2012-09-21T15:54:47.473 に答える