ナビゲーションバーに現在のページインジケーターを表示しようとしています。可能な限りすべての記事を調査し、正確な例を示しましたが、それでも機能しません。
2枚の画像のみのスプライト画像を使用しています。画像の幅は480、高さは40で、各画像の幅は240、高さは40です。片面は青、もう片面は黄色です。
オフ状態を青側にし、ホバー、アクティブ、現在の状態を黄色側にします。ただし、現時点ではアクティブ状態にする必要はありません。
だから、私の質問は：私のオフ状態（青い側）、ホバー状態（黄色の側）は完璧に機能します。現在の状態（黄色の面）が機能する必要があります。したがって、メニュー項目をクリックすると、画像は黄色のままになります。
これが私の最初の試みなので、恐ろしいコーディングをお詫びします
これは、HTML用に持っているものの一部です:( 3つのメニュー項目のうちの1つ、プロファイルのみを使用します）。
<body bgcolor="CEB86C"; class="profile">
<div id="navigation">
<ul>
<li><a class= "news" href="news.html" title"news"></a></li>
<li><a class="profile " href="index.html" title"profile"></a><li>
<li><a class= "about" href="about.html" title"about"></a><li>
</ul>
</div>
CSSは次のとおりです。
#navigation ul {
list-style: none;
text-align: center;
}
#navigation li {
display: inline;
}
#navigation li a {
text-indent: -5000px;
display: inline-block;
height: 40px;
}
#navigation li a.profile {
width: 240px;
background: url(images/profile.jpg);
text-decoration: none;
}
#navigation li a.profile:hover {
background: url(images/profile.jpg);
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background: url(images/profile.jpg);
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
ご入力いただきありがとうございます。よろしくお願いいたします。