Question

我正试图找出一种模拟移动设备悬停效果的方法。我一直在搜索，但似乎都没有。

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

Answer 1

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

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

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

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

Answer 2

市场上的新智能手机实际上支持悬停而无需调用任何JS来使其工作。只要智能手机支持悬停“手势”，与a：hover锚点伪类的常规链接就会实现悬停操作。

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

Answer 3

要在javascript中提供鼠标悬停效果，我们必须使用jquery-ui.js和jquery.ui.touch-punch.min.js，从ui js我们得到两个重要的函数droppable(); and draggable();
允许元素拖放但在HTML5中覆盖draggable = true 因此，如果我们想为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和mobile中运行相同的代码现在第二个重点，在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的缩放效果。

悬停效果对移动触摸设备（iPhone，Android，Windows）

3 个答案: