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

Posted 2023-03-06

【中文标题】移动触摸设备（iPhone、Android、Windows）上的悬停效果

【英文标题】：Hover effect on mobile touch devices (iPhone, Android, Windows)

【发布时间】：2013-10-22 14:57:41

【问题描述】：

我正在尝试找出一种方法来模拟移动设备的悬停效果。我已经四处搜索，但似乎没有任何工作。

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

【问题讨论】：

1+ 我一直在试图弄清楚同样的事情。如果它没有得到答案，我会悬赏它。

***.com/questions/2851663/…的可能重复

试过了，没用

【参考方案1】：

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

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

【参考方案2】：

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

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

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

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

【讨论】：

感谢亚当的建议！我现在可能只使用媒体查询。

【参考方案3】：

要在javascript中实现鼠标悬停效果，我们必须使用jquery-ui.js和jquery.ui.touch-punch.min.js，从ui js我们得到两个重要的函数droppable(); and draggable(); 它允许元素拖放，但在 html5 中会覆盖 draggable = true 因此，如果我们想对 dekstop 和 phone 使用相同的代码，请按如下方式使用

 //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上的缩放效果。