CSS翻转图像

Question

我希望默认情况下显示此图像的上半部分，然后使用一些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%;}

Answer 1

我认为您需要使用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 Fiddle Example

您还可以查看CSS Sprites。

Answer 2

首先，您需要将其用作背景。 <img>涵盖了背景。

Answer 3

摆脱图像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;
}

Answer 4

在这种情况下，您需要删除<img>标记，并始终对两种情况使用CSS背景属性。还可以使用CSS定义a标记的高度和宽度宽度。