html - を使用したスプライト画像

Question

スプライトの 2 つの画像で構成される画像があります。

私がやろうとしているのは、これをスプライトとして持つことです。その上にカーソルを合わせると、画像の下部が表示されます。

background-positionCSSを使用してこれを実行できることはわかっていますが、これは<img>HTML のタグです。

どうすればこれを行うことができますか？

ありがとう

Answer 1

CSS プロパティoverflowが に設定されている div を使用しhiddenます。その後、必要に応じて JavaScript を使用して、含まれている div のサイズを変更できます。

Answer 2

あなたの状況では、絶対位置にある画像にコンテナを追加し、コンテナにカーソルを合わせると画像の位置を移動します。

HTML：

<div class="myContainer">
   <img src="mySpriteImage" alt="" width="50" height="50" />
</div>

CSS：

.myContainer {
    position:relative;
    overflow:hidden;
    width:50px;
    height:25px;
}
.myContainer img {
    position:absolute;
    top:0;left:0;
}
.myContainer:hover img {
    top:auto;bottom:0;
}

Answer 3

これは、CSS トランジションを使用してこれを実現する方法です。

http://jsfiddle.net/NGWuZ/

マークアップ:

<div class="container">
    <img src="my_image_url">
</div>​

CSS:

.container{
    height: 175px;
    overflow: hidden;
    position: relative;  
}
.container img{
    position: absolute;
    top: 0;
    left: 0;
    transition: top 2s;
    -moz-transition: top 2s; /* Firefox 4 */
    -webkit-transition: top 2s; /* Safari and Chrome */
    -o-transition: top 2s; /* Opera */
}

.container img:hover{
   top: 175px;
}