8

divにhtmlボタンを追加しました：

$('.nav').append('<button class="restart">Restart</button>');

ボタンには、ホバー用のcssプロパティがあります。私の問題は、タッチスクリーンデバイスのボタンをタップすると、別の要素がタップされるまでボタンがホバー状態を維持することです。

タッチスクリーンデバイスでブラウジングするときにホバープロパティを無視できる方法はありますか？

4

5 に答える 5

5

私は最近この正確な問題に遭遇しました。iOSはホバー疑似を追加のクリックと見なしているようです。そのため、リンクは2回クリックする必要があります。

modernizrを使用する場合は、htmlタグに適用される.no-touchクラスを介して：hoverpsuedosを適用できます。

それで：

html a { color:#222; }

html.no-touch a:hover { color:#111; }
于 2012-12-18T15:48:49.250 に答える
3

理想的な解決策ではありませんが、ヘッドスタートを@dualedに感謝します！

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
    button.restart:hover
    {
        /* replicate 'up' state of element */
    }
}
于 2012-12-18T16:55:37.493 に答える
1

CSSルールでメディアタイプを指定できます。

@media handheld {
  button.restart:hover {
    /* undo hover styling */
  }
}

ただし、ハンドヘルドデバイスには必ずしもタッチスクリーンが付いているとは限らないことに注意してください。

（ところで、これはjQueryではなくCSSです）

于 2012-12-18T16:19:05.017 に答える
0

多分それはあなたが望むものではありませんが、メディアに応じて異なるcssスタイルシートを指定することができます：

 <link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
 <link rel="stylesheet" media="print" href="print.css" type="text/css">
 <link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

上記の例では、main.cssはコンピューター画面に使用されますが、ハンドフィールドデバイスの場合はsmallscreen.cssになります。

于 2012-12-18T15:49:07.547 に答える
-2

素晴らしくて簡単な方法の1つは、Modernizrを使用することです。

Modernizrを実行すると、検出したすべての機能のHTMLタグのclass属性にエントリが追加され、ブラウザがサポートしていない場合は、機能の前にno-が付けられます。

次に、cssスタイルシートに次の行を追加します

.touch *:hover {
    display: none;
}

そして、：hoverを何度でも自由に使用してください。サイトをタッチスクリーンで表示すると、すべての要素のホバー効果が無効になります。

于 2013-08-08T13:16:23.410 に答える