Question

使用内置的Javascript在CS5中进行翻转图像非常简单，但是，我需要基于CSS进行此操作。

我已经设法让代码工作了，精灵们都很精彩，但我似乎有问题......我需要让这些可点击（指向）一个URL。我已经尝试了每种方法，包括div行中的<a href> 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>

Answer 1

而不是div元素使用链接 - a，其中href属性指向您的目的地。

帮助将超链接插入CSS精灵代码..Java？ HTML？

1 个答案: