モバイルタッチデバイス（iPhone、Android、Windows）のホバー効果

Question

モバイルデバイスのホバー効果をシミュレートする方法を理解しようとしています。私は周りを検索したが、どれもうまくいかないようだ。

私はモバイルホバー効果を持つようにしようとしている要素は、ホバーで色を変えるリンクです。

Answer 1

実際に市場に出ている新しいスマートフォンは、JSを動作させるためにJSを呼び出すことなくホバーをサポートします。 a：hoverアンカー擬似クラスとの通常のリンクは、スマートフォンがホバー「ジェスチャー」をサポートしている限り、ホバーアクションを達成します。

http://developer.sonymobile.com/knowledge-base/technologies/floating-touch/

Answer 2

良い点、それはよくあなたがテストしている実際の携帯電話にやるべきことがたくさん持っていることがあります。私は通常、:hoverまたは:focusの状態をトリガーすることにより、長押しと滑りオフ（したがって、onMouseUpイベントはありません）に対応していると思われるアンドロイドでテストします。

本当にこの状態を引き起こす可能性は低いですが、それは価値があるのですか？ :Hoverは、デスクトップでマウスを使用するように設計されているため、これらのやりとりをモバイルで複製することは生産性が低いようです。

onMouseUpイベントをトリガーせずにホバー状態をトリガーするのは難しいため、モバイルにとって本当に面白いインタラクションを実現しようとすると、クリックが可能なリンクがない要素を使用する方が良いかもしれませんリンクをトリガーすることなく。

jQueryにはevent.preventDefault()があり、他のニーズに役立つ場合があります。

Answer 3

マウスオーバーに我々は、我々が使用したい場合はその要素がドラッグアンドドロップすることができますが、HTML5 でこのオーバーライドdraggable = true二つの重要な機能droppable(); and draggable();
を取得し、UIのjsから、jquery-ui.jsとjquery.ui.touch-punch.min.jsを使用する必要がJavaScriptで効果を与えるためにHTML5では、私たちはdekstopで同じコードだけでなく、モバイル
今第二の重要なポイントを実行することができます

//media query 
var mq = window.matchMedia("(max-width: 992px)"); 

if (mq.matches) { 
    // window width is at less than 992px 
    jqueryobject.draggable(); 
} 
else { 
    // window width is at gratet than 992px 
} 

を次のように同じdekstopのコードだけでなく、携帯電話は、私たちが異なるためdragstart(), dragleave(), dragover(), drop()を使用して使用しますoprationドラッグ＆ドロップする関連するが、モバイルでは、我々は我々がjquery.ui.touch-punch.min.jsから取得し、ドラッグ＆ドロップのためのtouchstart(), touchmove(), touchend() and touchcancel()を必要ですが、効果の上にマウスのために、我々は

<div id=drag_el > and <div id=drop_el> 

を次のように私たちはイベントtouchmove要素をドラッグすると、ロジックを使用する必要がありますので、火でありますその使用で

var elementTouching = document.elementFromPoint(first.clientX,first.clientY); 
     if(elementTouching.id == "drop_el") { 
      //apply u'r css effect like 
      elementTouching.style.zoom = "120%"; 
     } 
     else{ 
      // apply normalize effect of css like 
      elementTouching.style.zoom = "100%"; 
     }  

これは、あなたにmoseoverにズーム効果を与えます。