css - 如何使用多个图像背景和 :hover pseudo 在 CSS 中制作翻转图像

Question

我正在尝试在我为网站创建的醒目页面上制作一些滚动效果。我想使用 CSS3 的多背景能力和 :pseudo 类来实现这一点。

这是我的尝试；但是，他不会显示在 Dreamweaver 或 Chrome 中。

#1 {
width: 143px;
height: 142px;
background: url(../assets/Home/1a.jpg) top 0px no-repeat;
background: url(../assets/Home/1b.jpg) top -143px no-repeat;
display: inline-block;
}
#1:hover {
background: url(../assets/Home/1a.jpg) top -143px no-repeat;
background: url(../assets/Home/1b.jpg) top 0px no-repeat;
}

关于如何改进这一点的任何想法或实现我的目标的替代路线的建议？

Answer 1

我认为问题出在您的容器 ID:HTML ID 标签 can't start with a number .我让你的方法基本上没有改变。

HTML

<div id="c1"></div>​

CSS

#c1 {
 border: thin solid black;
 width: 400px;
 height: 200px;
 background: url('http://lorempixel.com/400/200/sports/1/') top left no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top -400px;
 display: inline-block;
}
#c1:hover {
 background: url('http://lorempixel.com/400/200/sports/1/') top -400px no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top left no-repeat;
}

http://jsfiddle.net/reCSP/