1

こんにちは、ここで同様の問題を抱えた他の例を見てきましたが、どの解決策もうまくいかないようです。2 つの画像が重なっている 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

2 つのこと: まず、:hover と :active などを使用すると、基本スタイルが使用されるため、スタイルbackground-imageとbackground-repeatスタイルを再宣言する必要はありません。

第二に、 :hover と :active が変わらない理由background-positionは、両方で同じであるためです。これは不注意なエラーだと思います。これに気付いたとき、おそらくあなたは顔をしかめるでしょう:)

幸運を！

于 2012-07-11T00:25:40.210 に答える