Question

我正在尝试在我正在为网站创建的启动页面上制作一些rollever效果。我想使用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

你是否尝试过css精灵并用锚标记包裹它，例如a：悬停#l {}（

Answer 2

我认为问题是您的容器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/

如何使用多个图像背景在CSS中制作变换图像，并且：hover pseudo

2 个答案: