0

ユーザーがナビゲーションメニューで選択したときの画像ボタンを変更しようとしています。つまり、ユーザーがホバーするとボタンの色が変更され（これでOKです）、ボタンの効果はユーザーがボタンを選択するまで残ります（これできない）。

「現在」または「選択」要素を使用しようとしましたが、機能しませんでした。なにか提案を？

また、ナビゲーションメニューを作成するという点では、「div」タグを使用する方が良いのでしょうか、それとも「li」タグを使用する方が良いでしょうか?

これまでのところ、HTML は次のようになっています。

<body>
<div class="menuBar">
    <div class="home">  <a href="#.php"></a></div>
    <div class="about"> <a href="#.php"></a></div>
    <div class="link">  <a href="#.php"></a></div>
    <div class="contact">   <a href="#.php"></a></div>
</div>
<body>

そして私のCSSは：

#menuBar {
    width:525px;
}

.home {
    float: left;
    margin-top: 0;
 }

.home a {
    background: 
    url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
}

.home a:hover {
    background: 
    url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
}

.about{
    float: left;
    margin-top: 0;
 }

.about a {
    background: 
    url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_02.jpg") 
    no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    width: 180px;
}

.about a:hover {
    background: 
    url("http://s20.postimg.org/h6iyh457d/Nav_Over_02.jpg") 
    no-repeat scroll 0 0 transparent;
}

フィドルを参照してください。

編集済み: JavaScript で実行している人を見たことがありますが、できれば CSS で実行したいと思います (ただし、JQuery やその他の方法で別の方法を示すこともできます)。

4

2 に答える 2

0

まず第一にLI、コードのパターンに準拠するようなものです。

また、W3C によって推奨されており、それがサンプルの作成方法です: http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus

コード固有の問題について。CSS でアクティブなクラスを作成し、それをリンクの onClick イベントに追加する必要があります。

CSS

.activeState {
    background:url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg") 
    no-repeat scroll 0 0 transparent;
}

サイト構造がすべて静的である場合、Home.php にアクセスしたときに、ホーム リンクのクラスを activeState に設定します。同様に、他のページ (たとえば About ページなど) に移動したときに、activeStateクラスを About リンクに割り当てます。

于 2013-06-17T21:19:08.983 に答える
0

集中

element:focus は、探している疑似クラス(.css セレクター) です。

詳細については、こちらをご覧ください: 6.6.1.2. ユーザー アクション疑似クラス :hover、:active、および :focus

インタラクティブなユーザー エージェントは、ユーザーのアクションに応じてレンダリングを変更することがあります。セレクターは、ユーザーが操作している要素を選択するための 3 つの疑似クラスを提供します。

  • :hover 疑似クラスは、ユーザーがポインティング デバイスで要素を指定している間に適用されますが、必ずしもアクティブ化するとは限りません。たとえば、ビジュアル ユーザー エージェントは、カーソル (マウス ポインター) が要素によって生成されたボックスの上に置かれたときに、この疑似クラスを適用できます。インタラクティブ メディアをサポートしないユーザー エージェントは、この疑似クラスをサポートする必要はありません。インタラクティブ メディアをサポートする一部の準拠ユーザー エージェントは、この疑似クラスをサポートできない場合があります (たとえば、ホバリングを検出しないペン デバイス)。
  • :active 疑似クラスは、要素がユーザーによってアクティブ化されている間に適用されます。たとえば、ユーザーがマウス ボタンを押して離すまでの時間です。複数のマウス ボタンを備えたシステムでは、:active はプライマリまたはプライマリ アクティベーション ボタン (通常は「左」マウス ボタン) とそのエイリアスにのみ適用されます。
  • :focus 疑似クラスは、要素がフォーカスを持っている間適用されます (キーボードやマウスのイベント、またはその他の形式の入力を受け入れます)。

このcssを試してください：

.about a:active,.about a:focus {
    background: url("path to your active-focus image") no-repeat scroll 0 0 transparent;
}

ここでは、jsFiddle を更新して、実際の例を取得します。

于 2013-06-17T21:17:29.823 に答える