使用内置 Javascript 在 CS5 中制作翻转图像非常简单，但是，我需要基于 CSS 来完成。
我已经设法让代码正常工作并且精灵都很棒，但我似乎有一个问题......我需要使这些可点击（指向）到一个 URL。我已经尝试了所有方法，包括<a href>div 行中的 url。我什至尝试将 url 与图像一起放置。我不想使用<li>我在其他地方看到的方法重新开始。我什至无法让它工作......总之有没有（简单的）方法让精灵指向一个网址......谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style type="text/css">
.sprites {
background-image : url(http://sheldontechnology.com/social/facebooksprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#facebooksprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
padding-left:10px;
float: left;
}
#facebooksprite:hover {
background-position : -0px 0px;
}
.sprites2 {
background-image : url(http://sheldontechnology.com/social/twittersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#twittersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#twittersprite:hover {
background-position : -0px 0px;
}
.sprites3 {
background-image : url(http://sheldontechnology.com/social/flickrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#flickrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#flickrsprite:hover {
background-position : -0px 0px;
}
.sprites4 {
background-image : url(http://sheldontechnology.com/social/youtubesprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#youtubesprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#youtubesprite:hover {
background-position : -0px 0px;
}
.sprites5 {
background-image : url(http://sheldontechnology.com/social/tumblrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#tumblrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#tumblrsprite:hover {
background-position : -0px 0px;
}
.sprites6 {
background-image : url(http://sheldontechnology.com/social/bloggersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#bloggersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#bloggersprite:hover {
background-position : -0px 0px;
}
.sprites7 {
background-image : url(http://sheldontechnology.com/social/googleplacessprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#googleplacessprite {
height : 73px;
width : 94px;
background-position : -0px -73px;
float:left;
}
#googleplacessprite:hover {
background-position : -0px 0px;
}
.sprites8 {
background-image : url(http://sheldontechnology.com/social/yelpsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#yelpsprite {
height : 75px;
width : 97px;
background-position : -0px -75px;
float:left;
}
#yelpsprite:hover {
background-position : -0px 0px;
</style>
<div class="sprites" id="facebooksprite"></div>
<div class="sprites2" id="twittersprite"></div>
<div class="sprites3" id="flickrsprite"></div>
<div class="sprites4" id="youtubesprite"></div>
<div class="sprites5" id="tumblrsprite"></div>
<div class="sprites6" id="bloggersprite"></div>
<div class="sprites7" id="googleplacessprite"></div>
<div class="sprites8" id="yelpsprite"></div>
</body>
</html>