8

モバイル デバイスのホバー効果をシミュレートする方法を見つけようとしています。私は周りを検索しましたが、どれも機能していないようです。

モバイルホバー効果を持たせようとしている要素は、ホバーすると色が変わるリンクです。

4

3 に答える 3

6

良い点は、テストしている実際の電話と関係があるかもしれません. 私は通常、または状態onMouseUpをトリガーすることにより、長押しとスライドオフ（イベントがないため）に対応しているように見えるAndroidでテストします。:hover:focus

ユーザーがこの状態をトリガーする可能性が本当に低い場合、それを設計する価値があるのでしょうか? :Hoverマウスを使用してデスクトップで使用するように設計されているため、これらの操作をモバイルで複製すると逆効果に思えます。

とはいえ、イベントをトリガーせずにホバー状態をトリガーするのは難しいため、モバイルで非常に興味深いインタラクションを実現しようとしている場合はonMouseUp、リンクをトリガーせずにクリックできるように、リンクが関連付けられていない要素を使用することをお勧めします。

jQueryにはevent.preventDefault()、他のニーズに役立つ可能性のあるものがあります。

于 2013-10-15T11:17:56.353 に答える
4

市場に出回っている新しいスマートフォンは、JS を呼び出さなくてもホバーをサポートしています。a:hover アンカー疑似クラスとの通常のリンクは、スマートフォンがホバーの「ジェスチャー」をサポートしている限り、ホバー アクションを実現します。

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

于 2013-10-15T00:44:50.967 に答える
1

javascript でマウスオーバー効果を与えるにはjquery-ui.js、andを使用する必要があります。ui js から 、要素をドラッグ アンド ドロップできるようにするjquery.ui.touch-punch.min.js2 つの重要な関数を取得しますが、このオーバーライドは HTML5 で行われるため、dekstop と phone に同じコードを使用する場合は、次のように使用します。続く droppable(); and draggable();
draggable = true

 //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 とモバイルで同じコードを実行できるので
、2 番目の重要なポイントです。HTML5 ではdragstart(), dragleave(), dragover(), drop()、ドラッグ アンド ドロップに関連するさまざまな操作に使用しますが、モバイルではtouchstart(), touchmove(), touchend() and touchcancel()、から取得するドラッグ アンド ドロップが必要でしjquery.ui.touch-punch.min.jsたが、マウス オーバー効果のために、次のようにロジックを使用する必要があります

<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 でズーム効果が得られます。

于 2014-08-05T07:58:31.783 に答える