1

我有一个带有幻灯片控件的精灵图像。

当用户将鼠标悬停在每个控件上时，我想更改其背景位置，使其看起来处于活动状态。

我在用：

-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;

我的代码在这个小提琴中（显然 bg 图像不是我的控件，而是随机图像）。

我希望过渡效果是人们在将鼠标悬停在一个项目上时所期望的（可能会淡出），而不是看起来像 bg 图像实际移动的当前效果。

有任何想法吗？

4

2 回答 2

5

实现此目的的一种方法是在锚标记内放置一个隐藏的跨度，并设置背景位置以显示您希望在悬停时显示的精灵区域。最初，这个跨度将被隐藏，不透明度为 0。

然后，在悬停时，您可以将不透明度转换为淡入，而不是转换背景位置。

代码看起来像这样：

html

<a><span></span></a>

css

a {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;   
  background-image: url("http://example.com/somepic.jpg");
}

a span {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-image: url("http://example.com/somepic.jpg");
  background-position: 150px 210px;
  opacity: 0;
  -moz-transition: opacity 0.45s;
  -webkit-transition: opacity 0.45s;
  -o-transition: opacity 0.45s;
}

a:hover span {
  opacity: 1;
}​​​

您可以在http://jsfiddle.net/hespb/5/进行演示

于 2012-12-07T12:52:56.847 回答
-1

您的代码更改了背景位置。

背景位置：150px 210px；

要让它正面，您需要更改背景颜色，添加不透明度并为其设置动画。

  背景：RGBA（255,255,255,0）；
于 2012-12-07T12:13:30.650 回答