2

jQueryホバー効果を使用してWebサイトを作成しています。ウェブサイトはデスクトップに最適です。画像にマウスを置くと、画像に黒いレイヤーを配置してボックス内のテキストを表示するホバー効果があり、内部のリンクをクリックするとページにリダイレクトされますが、 ipod touch / iphone / ipadを試してみると、動作しません。

これがフィドルです:http://jsfiddle.net/IronFeast/RvfQg/

コードを変更するにはどうすればよいですか?ボックスをダブルクリックして、中身を表示したいと思います。最初のクリック)選択。2回目のクリック)エフェクトを開始します。

どんな助けでもいただければ幸いです。

4

2 に答える 2

5

ここですべてのCSSを使用している方法が気に入っています。あなたの質問は完全には明確ではありませんが、これがあなたが望むものだと思います:http: //jsfiddle.net/howlermiller/fUSXp/2/(iPadで試してみてください)

jQueryを使用してこの機能を取得するのは非常に簡単ですが、CSSからすべてを作成するためにすでにいくつかの作業を行っているので、私はすべてのCSSとして答えを保持しました。チェックボックスハックを使用し、iPadでテストして動作することを確認しました。

このハックはデスクトップブラウザでも機能するため、ボックスをクリックすると、マウスをオフにしたままではなく、スタイルが維持されます。それは、あなたがそれをどうするかによって、良いことでも悪いことでもあり得ます。

PS純粋なcss(別名チェックボックスハック)を使用することは、これを行うための実際の最良の方法ではありません。これにより、コードの柔軟性と再利用性が少し低下します。しかし、それは完全にうまく機能します。

編集:プレスを停止します。Safari5にバグがあります。このStackOverflowの質問のおかげで見つかりました。それを修正するためにあなたがしなければならないのは、ラベルに空のonclickを追加することだけです(ええ、別のハック、私は知っています、私もそれについて満足していません)。私自身のテストでは、Safari 6にはこのバグがないようです。そのため、Safari 5をサポートしていない限り、このバグは必要ありません(現実的には、現時点ではおそらくこれは良い考えです。これを数回使用している場合ただし、数か月は、おそらく古いフィドルを使用できます)。修正されたjsfiddleは次のとおりです。http://jsfiddle.net/howlermiller/fUSXp/3/

于 2012-10-12T12:35:48.007 に答える
0

別の方法として、クリックされたときに要素に「ホバー」のようなクラスを追加し、CSSを変更して、:hoverのような疑似セレクターを使用する場合と、要素に実際にクラス「ホバー」がある場合の両方でアニメーション化することもできます。

現在クリックされている要素に追加する前に、クリックされた要素の他のすべての兄弟からクラスを削除することをお勧めします。

CSSの変更は次のようになります。

.view-sixth.hover a.info,
.view-sixth:hover a.info {...}

したがって、基本的に、アニメーション化された要素ごとに2つの同様のセレクターを追加します。

于 2012-10-12T10:04:51.733 に答える