1

嗨，我在这里查看了其他类似问题的示例，但似乎没有一个解决方案对我有用。我有两个图像重叠的 CSS 精灵图像。顶部图像用于链接状态，底部图像用于 :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>
4

1 回答 1

2

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

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

祝你好运！

于 2012-07-11T00:25:40.210 回答