モバイルデバイスの場合、ホバーをタッチ/クリックに変更

周りを見回しましたが、探しているものが見つかりません。

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

これが私が現在持っているものです：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;
}

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

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

モバイル環境でFIDDLEをテストする必要があります。現時点ではできません。
訂正-私はちょうどモバイルでテストしました、それはうまくいきます

onclick=""ホバーされた要素に追加できます。その後、ホバーが機能します。

編集：しかし、マークアップに関連するスタイルを追加するべきではなく、代わりに投稿するだけです。

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%;
    }

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

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

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

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

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

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

ほとんどのデバイスでは、他の回答が機能します。私にとって、それは上で働いていたことを確認するために、すべての（反応に）デバイスIは、アンカータグでラップしなければならなかった<a>：そして以下を追加し :hover、:focus、:active（そのために）、などrole="button"とtabIndex="0"。

この簡単な方法でこの目標を達成できると思います。CSSを使用すると、ポインタイベントを「none」にオフにしてから、jQueryを使用してクラスを切り替えることができます。

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

jQueryを使用してクラス分けを切り替えます。

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

私は上記の答えに同意しますが、それでもこれを行う別の方法があり、それは mediaクエリです。

これがあなたがやりたいことだとしましょう：

body.nontouch nav a:hover {
    background: yellow;
}

次に、メディアクエリでこれを行うことができます：

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

詳細については、このページをご覧ください。

モバイルタッチスクリーンボタンのスタイリングに問題がある人のためのCSSのみのソリューション。

これにより、ホバースティック/アクティブボタンの問題が修正されます。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>