1

私の理解をはるかに超える奇妙なCSSの癖に出くわしました。助けていただければ幸いです。

Ryan Collinsが提案したクリック可能なイベントメソッドを使用して、派手な純粋なcssドロップダウンソリューションを構築しようとしていました: http://www.ryancollins.me/?p=1041

:active と :hover およびいくつかのネストされた div を使用して、マウス クリック時に同じコンテナー内の姉妹要素を表示させるトリガー スパン (または div など) を作成できます。Ryans ページの例は私の ipad で機能したので、iOS はタッチ イベントを :active 状態のトリガーとして処理するのに十分スマートであると想定しました。トリガーにハイパーリンクが含まれている場合、これは機能しますが、アクティブ状態を無効にする方法はありません別のハイパーリンクをクリックしても安全なハイパーリンク。

cssだけでエレガントなナビゲーション(およびその他のもの)をポップアップ表示して非表示にするという私の計画は失敗し、メニューは決して折りたたまれません. 私はいくつかのテストを行い、最終的に重要な要素を、彼がページに埋め込んだ twitter ウィジェットに絞り込みました。一部の JavaScript は、埋め込まれたツイートのスタイルを設定します。その際、ハイパーリンクがなくても、iOS のタッチを介して突然機能する :active および : hover ソリューションに影響を与えます。

この動作の原因と、Twitter ウィジェットを埋め込んでビューから非表示にするなどのクレイジーなハックに頼らずにエミュレートできるかどうかを誰か教えてもらえますか?

4

1 に答える 1

2

コードをさらに掘り下げて、Googleの助けを少し借りて、自分で答えを見つけました。

Twitter ウィジェットは独自のものの中でも touchstart イベントを宣言します。これは、ページのどこにでもあるだけで、モバイル サファリに CSS :active 疑似スタイルを利用させるのに十分です。

http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/

于 2012-07-04T08:43:41.053 に答える