3

ユーザーがリンクをクリックするまで非表示になっているdivがあります。セレクターを使用するとa:active + div、divが表示されます。次にdiv:active, div:focus、divを表示したままにする必要があります。

divを表示するのは簡単でしたが、表示を維持することが私が抱えている問題です。divをクリックすると（アクティブをリンクから外し、フォーカス/アクティブをdivに配置）、divが再び消えます。

使用div:hoverしてみましたが、divを表示している間（クリックした後でも）、divにカーソルを合わせるとdivが消えます。なぜ私のdivに適用されていないのですか:active？:focus

例： http： //jsfiddle.net/pJWPE/

4

3 に答える 3

4

:target代わりに疑似クラスを使用して、別のアプローチを取ることもできます。これを説明する最良の方法は、例を使用することです。

#box {
  display: none;
}
#box:target {
  display: block;
}
<a href="#box">Open</a>  <a href="#">Close</a>

<div id="box">content</div>

警告、この例のブラウザ サポートがどのようなものかはわかりません。私のバージョンのChromeで動作します。

于 2012-07-31T09:41:17.033 に答える
2

：activeと：focusがdivに適用されないのはなぜですか？

なぜなら:active、:focusいくつかの制限があります：

6.6.1.2。ユーザーアクションは、：hover、：active、および：focusを疑似クラス化します

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

  • :active疑似クラスは、要素がユーザーによってアクティブ化されているときに適用されます。たとえば、ユーザーがマウスボタンを押して離すまでの間に。複数のマウスボタンがあるシステムでは、：activeは、プライマリまたはプライマリアクティベーションボタン（通常は「左」マウスボタン）とそのエイリアスにのみ適用されます。
  • :focus疑似クラスは、要素にフォーカスがあるときに適用されます（キーボードまたはマウスのイベント、またはその他の形式の入力を受け入れます）。

:active要素が取得または取得できるドキュメント言語または実装固有の制限がある場合があります:focus。

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

Aは、入力（ 、、...）またはその他のインタラクティブ要素（、、など）<div>の形式ではありません。それはただの容器です。どちらも適用されません。<textare><input><a><audio><video>:focus:active

:target代わりに、Caseyの提案に従って使用してください。

于 2012-07-31T09:44:58.743 に答える
0

コンテキストは、関連するメニューをクリックすると表示され、リンクをクリックしている間も表示したいサブメニューを含むメニューです。（あなたにかなり似ています）。

HTML マークアップ :

<nav>
    <ul>
        <li>
            <a href="#" > 
            </a>
            <div>
                <ul>
                   <li> 
                      <a href="/sites/p1.php">submenu link1</a></li>
                   <li> 
                      <a href="/sites/p2.php">submenu link2</a></li>
                   <li> 
                      <a href="/sites/p3.php">submenu link3</a></li>
                </ul>
            </div>
        </li>
    </ul> 
</nav>

Firefox と Chrome の Web ブラウザーの場合、私は個人的に以下を使用します。

nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
   display : block;
}

最初のセレクターは、クリック/タブ選択時に表示されるサブメニューを取得するために、リンク アンカーを参照します。2 つ目は、リンクをクリックしたときにサブメニュー div を開いたままにすることです (アクティブな div を表示し続けます)。

これは私にとってはうまく機能しますが、残念ながら IE では機能しません。

于 2015-02-03T08:47:31.080 に答える