0

因为我以前没有这样做过，所以对如何做到这一点有点困惑，但我有 3 张图片：

默认状态为一张图片：1.png，悬停状态为第二张图片：2.png，点击链接/图片时的第三张图片：3.png

我将如何设置这 3 个图像？

4

3 回答 3

3

您可以通过 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-22T02:15:59.783 回答
1

您可以将它们设置为三个不同的图像并通过 css 控制它们，如下所述。

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

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

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

但是一个常用的技术是 css-sprites。您将这 3 个图像组合成一个图像。假设每个图像图像是 100x100 像素，因此您制作的图像是 100x300 像素。然后你控制background-position. 这消除了用户缺乏响应能力的问题，并且在您的服务器上更容易。

于 2012-05-22T02:16:18.120 回答
0

以上两种解决方案将无法正常工作，因为对于 a:active 图像不会永久更改。您必须为此使用 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-22T05:54:36.840 回答