Question

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

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

我如何设置这3张图片？

Answer 1

您可以通过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>

Answer 2

您可以将它们设置为三个不同的图像，并通过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。这消除了用户缺乏响应性的问题，并且在您的服务器上更容易。

Answer 3

以上两个解决方案无法正常工作，因为对于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>

这对我来说很好。我希望它会起作用！

悬停和点击状态具有不同图像的锚点/图像

3 个答案: