0

この画像の上半分をデフォルトで表示してから、CSS を使用して画像を上に移動させ、マウスがその上に置かれたときに下半分が表示されるようにします。これがコードと私が試したものですが、機能していません。このコードを機能させるのを手伝ってくれる人はいますか?

HTML:

<div id="next">
  <a href="page2.html"><img src="images/next3.png" alt="next page"></a>
  </div>

CSS:

#next a:hover{background: url('images/next3.png') 0 -45px;}

ここに画像の説明を入力

編集: HTML:

 <div id="next">

 </div>

CSS:

#next {
      height:40px;
      width:160px;
      background-image:url('images/next3.png');
    }

#next:hover{background-position: 100% 100%;}
4

4 に答える 4

2

background-positionこれを達成するには属性を使用する必要があると思います。

CSS

div
{
    height:40px;
    width:160px;
    background-image:url('http://i.stack.imgur.com/OOGtn.png');
}

div:hover
{
    background-position:100% 100%;
}

JS フィドルの例

CSS Spritesを調べることもできます。

于 2013-04-30T23:13:31.797 に答える
1

そもそも背景として使用する必要があります。<img>が背景を覆っています。

于 2013-04-30T23:12:50.497 に答える
1

画像の HTML を取り除き、次のような CSS を使用します。

a {
    display: inline-block;
    height: 40px;
    width: 160px;
    background: transparent url(img.jpg) 0 0 no-repeat;
}

a:hover {
    background-position: 0 40px;
}
于 2013-04-30T23:14:34.907 に答える