web-dev-qa-db-ja.com

iPhone / iPad / iPodでCSSホバーを修正する

IOSでホバー効果を修正したい（タッチイベントに変更したい）が、わからない。これを説明しましょう。ページにテキストがあります：

<div class="mm">hello world</div>

スタイル付き：

.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }

わかりました、dekstopでマウスをテキストの上に置くと、＃ddd背景が表示されますよね？しかし、iOSではテキストに触れても何も得られませんが、タップするとtapい粘着性のある#ddd背景が得られますが、これはユーザーがそのテキストに触れたときにホバー効果を得たいと思います（toucheventのようなものです） 。しかし、freemyappps.comまたは（このサイトをチェックしてください-> D4F iOSデバイスで確認し、ケーキを食べるようなホバー効果を見るために何かをタッチしてください:)）しかし、これらのサイトそれを修正しましたか？それらのように修正するにはどうすればよいですか？ありがとう

ioscsshovertouch
29
user2627442

ここに、私が作成したiOSでのJavaScriptホバーの基本的な成功した使用法を示します。

注：jQueryを使用しましたが、うまくいけばうまくいきます。

JavaScript：

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS：

.mm { color:#000; padding:15px; }

HTML：

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
6
Santa Claus

IOSにホバーのある要素として認識させたいものにonclick = ""を追加します。

<div onclick="">Click Me!</div>
98
Dan Morris

これについて知らない人もいます。 div:hoverで適用し、iPhoneで作業できます。

:hover effectを使用して、次のCSSを要素に追加します

.mm {
    cursor: pointer;
}
46
ralcazar

Onclick = ""は、使用しようとしたときに非常に気まぐれでした。

タップイベントに：active cssを使用します。これをヘッダーに配置するだけです：

<script>
    document.addEventListener("touchstart", function() {},false);
</script>
23
Andrew M

これがパフォーマンスに大きな影響を与えるかどうかはわかりませんが、これは私にとって過去のトリックです。

var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();
16
user1387483

即時関数を使用して、user1387483の答えをわずかに改善します。

(function() {
  $("*").on( 'touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;

また、これが「最も適合性が高く、最も準拠しているソリューション」であると思われることにもBozに同意します。

5
Jesse Heines

Dan（ https://stackoverflow.com/a/20048559/4298604 ）に応えて、少し変更したバージョンをお勧めします。

<div onclick="void(0)">Click Me!</div>

「void（0）」を追加すると、「」ではなく未定義のプリミティブ値を取得できます。

3
Steven Ventimiglia

私はそれが古い回答であり、すでに答えていることを知っていますが、別の解決策を見つけましたCSSクラスを追加せずにまたは本当に必要以上のJavaScriptを実行し、誰かを助けることができることを望みます。

:hoverタッチ対応ブラウザのあらゆる種類の要素に影響するため、要素がクリック可能であることを伝える必要があります。そのためには、jQueryまたはjavascriptを使用して、クリック関数に空のハンドラーを追加するだけです。

$('.need-hover').on('click', function(){ });

このスニペットを備えたモバイル対応ブラウザでのみ行うのが良いでしょう：

// check for css :hover supports and save in a variable
var supportsTouch = (typeof Touch == "object");

if(supportsTouch){ 
    // not supports :hover
    $('.need-hover').on('click', function(){ });
}
2
E. Atzeni

ホバー擬似クラスは、リンクタグに適用された場合にiOSでのみ機能します。それは、タッチデバイスの領域にホバーがないためです。これは、アクティブクラスのように機能します。そのため、ユーザビリティの理由でリンクがどこかに移動しない限り、それらを保持することはできません。 divをリンクタグに変更すると、問題はありません。

2
jons

私は正常に使用しました

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);

http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm で文書化されました

andrew Mの回答のバリエーション。

2
Sylvain D.

  1. ターゲット要素へのイベントリスナーの割り当ては機能しているようです。 （少なくとも「クリック」で動作します。） iOSでのCSSホバーは、イベントリスナーが割り当てられている場合にのみ機能します

  2. ターゲット要素をa [href = trivial]でラップすることも機能しているようです。 https://stackoverflow.com/a/28792519/137839

クリックやその他のイベントを処理するためのモバイルSafariのアルゴリズムに関する関連するメモ/図は次のとおりです。 iPhone/iPadユーザーの：hover擬似クラスを強制的に無視することは可能ですか？

1
jerng

一部のサイトでは、css "cursor：help"を使用する必要があります。 iOSのみが刺激を与えました。これを解決するには、ページのすべてを「cursor：pointer」に変更します。それは私のために働く。

jQuery：

if (/iP(hone|od|ad)/.test(navigator.platform)) {
$("*").css({"cursor":"pointer"});
}
0
Wobbo

質問は古いものの、まだ関連があることを知っています。

私が見つけた唯一の解決策は、次のような@mediaクエリを使用することです：

@media (hover) { my-class:hover {
  //properties
 }
}

私の参照： https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

0
gloaysa

ここで、CSSコードに可視性属性を追加することでこの問題を解決しました。これは website で機能します。

元のコード：

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

IOSタッチコードの修正：

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
visibility:hidden;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}
0
Jackie

古い投稿しかし、テーブルにJSONデータを入力するときに、onlclick = ""を正常に使用したことは知っています。以前に他の多くのオプション/スクリプトなどを試しましたが、何も機能しませんでした。他の場所でこのアプローチを試みます。 2013年から@Dan Morrisに感謝します！

     function append_json(data) {
     var table=document.getElementById('gable');
     data.forEach(function(object) {
         var tr=document.createElement('tr');
         tr.innerHTML='<td onclick="">' + object.COUNTRY + '</td>' + '<td onclick="">' + object.PoD + '</td>' + '<td onclick="">' + object.BALANCE + '</td>' + '<td onclick="">' + object.DATE + '</td>';
         table.appendChild(tr);
     }
     );
0
BorisNZ