html - 移动触摸设备（iPhone、Android、Windows）上的悬停效果

Question

我试图找出一种方法来模拟移动设备的悬停效果。我四处寻找，但似乎没有一个工作。

我试图获得移动悬停效果的元素是一个在悬停时改变颜色的链接。

Answer 1

很好，它可能与您正在测试的实际手机有很大关系。onMouseUp我通常使用 android 进行测试，它似乎通过触发:hoveror:focus状态来满足长按和滑出（因此没有事件）的需要。

但这确实引出了一个问题，如果用户真的不太可能触发这种状态，是否值得设计？:Hover专为桌面使用鼠标而设计，在移动设备上复制这些交互似乎适得其反。

就是说，如果您尝试为移动设备实现一些非常有趣的交互，因为在不触发事件的情况下很难触发悬停状态onMouseUp，您最好使用没有附加链接的元素来允许点击而不触发链接。

jQueryevent.preventDefault()可能有助于满足其他需求。

Answer 2

市面上的新智能手机其实是支持hover的，不需要调用任何JS来实现。只要智能手机支持悬停“手势”，与 a:hover 锚伪类的常规链接将实现悬停动作。

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

Answer 3

为了在javascript中提供鼠标悬停效果，我们必须使用jquery-ui.jsand jquery.ui.touch-punch.min.js，从ui js我们得到两个重要的函数droppable(); and draggable();
，它允许元素拖放，但是draggable = true在HTML5中这个覆盖，所以如果我们想对dekstop和phone使用相同的代码然后使用as跟随

 //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
 }

所以我们现在可以在桌面和移动设备上运行相同的代码，
第二个重点，在 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 的缩放效果。