CSS Sprite 事件状态

Question

您好，我已经查看了此处存在类似问题的其他示例，但似乎没有一个解决方案适合我。我有一个 CSS sprite 图像，两个图像重叠。顶部图像用于链接状态，底部图像用于 :hover 和 :active。 :hover 有效，但 :active 状态不显示。任何信息将不胜感激!

CSS:
.menu {
    width: 855px;
    margin-right: auto;
    margin-left: auto;
}
.menu ul {
list-style-type: none;
}
.menu ul li {
    float: left;
    background-color:#234C94;
}
.menu ul li a {
    display: block;
    height: 52px;
    width: 122px;
    background-color: #27589B;
    text-indent: -9999px;
}    
.menu ul li a.welcome {
    background-image: url(IMG/IMAGE.png)
        background-repeat: no-repeat;
    background-position: 0px 0px;
}   
.menu ul li a.welcome:hover {
    background-image: url(IMG/IMAGE.png)
    background-repeat: no-repeat;
    background-position: 0px -52px;
} 
.menu ul li a.welcome:active {
    background-image: url(IMG/IMAGE.png)
    background-repeat: no-repeat;
    background-position: 0px -52px;

HTML:

<div class="menu">
  <ul>
   <li><a href="Counselor.html" class="welcome">Item 1</a></li>
   <li class="academics"><a href="Academics.html" class="academic">Item 2</a></li>
   <li><a href="Athletics.html" class="athletic">Item 3</a></li>
   <li><a href="ClubsORGs.html" class="club">Item 4</a></li>
   <li><a href="ResidentialLife.html" class="life">Item 5</a></li>
   <li><a href="Education.html" class="exp">Item 6</a></li>
   <li><a href="Map.html" class="map">Item 7</a></li>
  </ul>
</div>

Answer 1

两件事:首先，当你使用 :hover 和 :active 和其他类似的东西时，基本样式被采用，所以你不需要重新声明 background-image 和 background-repeat 样式，一次就可以。

其次，:hover 和 :active 没有区别的原因是因为你的 background-position 在两者上是相同的。我认为这是一个粗心的错误，当你意识到这一点时，你可能会脸红:)

祝你好运!