1

私はチュートリアルを正確に実行しましたが、Print_tab.png から Print_tab_hover.png にフェードする代わりに、白にフェードします。これを修正する方法はありますか (javascript を使用せずに)?

これが私が使用したコードです：

HTML:

    <div id="print"
     <img class="bottom" src="images/print_tab_hover.png"  />
     <img class="top" src="images/print_tab.png"  />
    </div>

CSS:

    #print {
    position:relative;
    width: 300px;
    height: 169px;
    margin: 0 auto;
    }

    #print img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
    }

    #print img.top:hover {
    opacity: 0;
    }
4

1 に答える 1

1

これは機能します：

#print {
    position:relative;
    width: 200px;
    height: 120px;
    margin: 0 auto;
    background-image: url(http://fc06.deviantart.net/images2/i/2004/07/e/7/Firefox_dock_icon.png);
}

#print img {
    position: absolute;
    left: 0;
    width: 200px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
}

#print img.top:hover {
    opacity: 0;
}

<div id="print">
   <img class="top" src="http://lanscaping-ideas.com/wp-content/uploads/2012/04/Landscape-Paintings-2.jpg"  />
</div>

#printのデフォルトの背景を設定して新しい画像をフェードオーバーするか、その逆を行います。

于 2012-05-30T22:34:05.420 に答える