1

状況

で非表示から別の実行<div>をトリガーする を作成したいと思います。このCSSコードを使用してこれを行いました：<div>visibility:visible:hover

#MAIN_NAVIGATION { /* Styling goes here */ }

#NAVIGATION_POP_DROP {
visibility: hidden;}

#MAIN_NAVIGATION:hover > #NAVIGATION_POP_DROP {
visibility: visible;}

#MAIN_NAVIGATION:hover { /* Changes original styling to change BG color */}

#MAIN_NAVIGATIONホバーを受け入れる div に使用される div id です。 #NAVIGATION_POP_DROPマウスを置いたときに表示されるdivです#MAIN_NAVIGATION

問題

上記の CSS は、デスクトップ/ラップトップを使用して機能します。「ホバー」がタッチデバイスでも機能するソリューションを探しました。問題は、 をタップすると#MAIN_NAVIGATION、#NAVIGATION_POP_DROP別の要素をタップしても が閉じないことです。をトリガーする唯一のアクションは、 ID#NAVIGATION_POP_DROPを持つ別のdivをタップしたときです。#MAIN_NAVIGATION

質問

#NAVIGATION_POP_DROPタッチデバイスで、 (1) 別の要素をタップする、(2) 画面をスクロールする、または (3) 同じ div をタップすることで、div を再び非表示にするにはどうすればよい#MAIN_NAVIGATIONですか?

注: #MAIN_NAVIGATIONdiv 要素にはリンクがありません。

私が望む効果はMashableのメニューに似ています。

誰かが私を助けてくれることを願っています。CSS の使用は初めてで、タッチ デバイスの設計についてはあまり知識がありません。ありがとうございました。

4

1 に答える 1

0

次のように、疑似セレクタ :after を使用することをお勧めします。

#MAIN_NAVIGATION:hover:after {
visibility: visible; content:'the content of your new div'; /* add any style here*/}

私の例が動いているのを見てください：

http://jsfiddle.net/wNrdp/
于 2013-09-27T22:53:55.230 に答える