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

Question

我正在尝试找到一种在移动设备上模拟悬停效果的方法。我已经搜索了一些方法，但似乎都不起作用。

我想要实现移动悬停效果的元素是一个链接，在悬停时会改变颜色。

- Colton Anglin

---

我一直试图弄清楚同样的事情。如果没有答案，我会付赏金。 - Josh Crozier

可能是https://dev59.com/dXE85IYBdhLWcg3wShef的重复问题。 - Giovanni Silveira

尝试过了，没有成功。 - Colton Anglin

Answer 1

很好的观点，这可能与你测试的实际手机有很大关系。我通常使用安卓进行测试，它似乎可以满足长按和滑动的需求(因此没有onMouseUp事件)并触发:hover或:focus状态。

但问题是，如果用户真的很少会触发这种状态，那么为其设计是否值得？:Hover是为桌面电脑使用鼠标而设计的，在移动设备上复制这些交互似乎是适得其反。

尽管如此，如果你想要实现一些非常有趣的移动交互，因为很难触发悬停状态而不触发onMouseUp事件，你可以更好地使用没有链接附加的元素，以允许单击而不触发链接。

jQuery具有event.preventDefault()函数，可帮助其他需要。

- Adam D Harrington

---

谢谢你的建议，亚当！我现在可能会使用媒体查询。 - Colton Anglin

Answer 2

新上市的智能手机实际上支持悬停，无需调用任何JS即可使其正常工作。只要智能手机支持悬停“手势”，带有a:hover锚伪类的常规链接就可以实现悬停操作。

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

- user2770714

Answer 3

为了在JavaScript中实现鼠标悬停效果，我们需要使用jquery-ui.js和jquery.ui.touch-punch.min.js。从UI js中，我们获得两个重要的函数droppable(); 和 draggable();，这允许元素被拖放，但会覆盖HTML5中的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
 }

所以我们可以在桌面和移动设备上运行相同的代码。
现在第二个重要的点，在HTML5中，我们使用dragstart()，dragleave()，dragover()，drop()来执行与拖放相关的不同操作，但在移动设备上，我们需要使用touchstart()，touchmove()，touchend()和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%";
       }    

它可以在鼠标悬停时提供缩放效果。

- Bhushan