web-dev-qa-db-ja.com

変更：モバイルデバイスのホバーにタッチ/クリックする

見回したことがありますが、探しているものを見つけることができません。

現在、：hoverによってトリガーされるcssアニメーションがページにあります。メディアクエリを使用してページが幅700ピクセルを超えてサイズ変更されたときに、これを「クリック」または「タッチ」に変更したいと思います。

ここに私が今持っているものがあります： http://jsfiddle.net/danieljoseph/3p6Kz/

ご覧のとおり、：hoverはモバイルデバイスでは機能しませんが、ホバーではなく、クリックするだけで同じように機能することを確認したいです。

可能であればcssを使用しますが、jQueryにも満足しています。

これは非常に簡単だと感じていますが、非常に明白なものが不足しています！任意の助けをいただければ幸いです。

Cssアニメーションは次のとおりです。

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}
csscss-animations
56
DannyBoy

：activeセレクタを：hoverと組み合わせて使用​​すると、：-hoverセレクタの後に：activeセレクタが呼び出される限り、 w3schools に従ってこれを実現できます。

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

モバイル環境で FIDDLE をテストする必要があります。現時点ではできません。
correction-モバイルでテストしたところ、問題なく動作します

64
LOTUSMS

ホバーされた要素にonclick=""を追加できます。ホバーはその後動作します。

編集：ただし、マークアップに関連するスタイルを追加しないでください。代わりにスタイルを追加してください。

17
MindlessRanger

MicrosoftのEdgeブラウザーを搭載したモバイルデバイスでも同じ問題が発生しました。 aria-haspopup="true"で問題を解決できます。他のモバイルブラウザのdivと:hover、:active、:focusに追加する必要があります。

Htmlの例：

<div class="left_bar" aria-haspopup="true">

CSS：

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }
5
Steve_Angel

私はCSS初心者ですが、画像、リンク、ボタンなどの「ホバリング可能な」要素であれば、ホバーがタッチスクリーンで機能することに気付きました。次のトリックを使用して、CSSですべてを行うことができます。

Divの背景をdiv内の実際の画像タグに変更するか、div全体にダミーリンクを作成すると、画像に触れるとホバーとして登録されます。

これを行うと、ページの残りの部分も「ホバリング可能」にする必要があるため、画像の外側をタッチすると、info-slide：hoverが終了したことが認識されます。私の秘は、他のすべてのコンテンツをダミーリンクにすることです。

あまりエレガントではありませんが、機能します。

2
user6679588
document.addEventListener("touchstart", function() {}, true);

このスニペットは、タッチスクリーンのホバー効果を有効にします

1
indapublic

ほとんどのデバイスでは、他の回答が機能します。私にとっては、それがevery device（react）で機能することを確認するために、アンカータグ<a>でラップし、次を追加する必要がありました：:hover、:focus、:active（この順序で）、およびrole="button"およびtabIndex="0"。

1
Ryan Walker