0

重複の可能性：
現在のページのナビゲーションメニューを強調表示します

それぞれが一意のCSSIDを持つ複数のDIVで構成されるメニューに取り組んでいます。：hoverセレクターはCSSで使用されており、対応するページが表示されているときに各divに異なるスタイルを与えようとしますが、効果がないようです。私のCSSとHTMLはこのJSFiddleで見ることができます。基本的に、これらのdivはメニューの作成に使用されているので、ハイパーリンクされたページが表示されているときに「アクティブ」クラスをdivに追加したいと思います（誰かが私の「ホームページ」ページにいるときは、 「ホーム」メニューdivに適用されるアクティブなスタイル）。

#pagebuttonhome {
  width: 130px;
  height: 30px;
  background-color: #ffe0e8;
  position: absolute;
  overflow: hidden;
  left: 30px;
  bottom: 0px;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
  line-height: 30px;
  color: #dc2d18;
}
#pagebuttonhome:hover {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
#pagebuttonhome.active {
  background-color: #dc2d18;
  color: #ffe0e8;
  height: 40px;
  cursor: pointer;
}
<div id="pagebuttonhome">HOME</div>

助けてくれてありがとう！

4

1 に答える 1

3

これを回避する1つの方法は、各ページの本文に一意のIDを追加することです。たとえば、<body id="homelink">ホームページ、<body id="aboutlink">アバウトページ（ある場合）などです。次に、#pagebuttonhome.activeセレクターを次のように置き換えます。

#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout

また、JavaScriptを使用しなくても、表示しているページのリンクが選択されて強調表示されます。

http://jsfiddle.net/MEnKR/11/

于 2012-09-08T01:53:23.297 に答える