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 回答
1

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

于 2013-04-30T23:15:55.443 回答