锚/图像具有不同的图像悬停和点击美国

如何做到这一点，因为我没有做过，但我有3点图像有点糊涂：锚/图像具有不同的图像悬停和点击美国

一个图像作为默认状态：1 .png，第二张图像作为悬停状态：2.png，第三张图像用于点击链接/图像时：3.png

如何设置这3张图片？

2012-05-22 Joe Bobby

你可以通过css类来做到这一点。例如：

<div class="image"></div> 

<style type="text/css"> 
    .image { 
     background: url(1.png) no-repeat top left; 
    } 
    .image:hover { 
     background: url(2.png) no-repeat top left; 
    } 
    .image:active { 
     background: url(3.png) no-repeat top left; 
    } 
</style>

来源

2012-05-22 02:15:59

该死！你打败了我:)欢迎btw ... – PhD

谢谢你，很高兴见到这里的好人;） –

您可以将它们设置为三个不同的图像，并通过CSS所描述的波纹管控制它们。

#my-image { 
    background: url("/1.png"); 
} 

#my-image:hover { 
    background: url("/2.png"); 
} 

#my-image:active { 
    background: url("/3.png"); 
}

但是常用的技术是css-sprites。您可以将这3张图片组合成一张图片。假设每张图片的图片都是100x100px，那么您的图片就是100x300px。然后你控制background-position。这消除了用户缺乏响应的问题，并且在您的服务器上更容易。

来源

2012-05-22 02:16:18 Frankie

以上两种解决方案，不会因为一个在正常工作：积极的图像不会permantly change.You必须使用jQuery的，这和每个人都这样做也：

   <html> 
       <head> 
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
        <script type="text/javascript"> 
         $(document).ready(function(){ 
         $("#my_link").hover(function(){ 
          $(this).removeClass("class_1").addClass("class_2"); 
          },function(){ 
          $(this).removeClass("class_2").addClass("class_1"); 
         }); 

        $("#my_link").click(function(){ 
         $(this).removeClass("class_1").addClass("class_3"); 
        }); 
       }); 

      </script> 
      <style type="text/css"> 
       .class_1{background: url("/1.png") no-repeat top left;} 
       .class_2{background: url("/2.png") no-repeat top left;} 
       .class_3{background: url("/3.png") no-repeat top left;} 
      </style> 
     </head> 
     <body> 
       <a id="my_link" class="class_1" href="#" >Click here</a> 
     </body> 
     </html>

这工作对我很好。我希望它能起作用！

来源

2012-05-22 05:54:36

锚/图像具有不同的图像悬停和点击美国

回答

相关问题