如何在支持触摸的浏览器中使用触摸模拟hover？
用这样的一些HTML：
<p>Some Text</p> 然后是这样的一些CSS：
p { color:black; } p:hover { color:red; }
我怎样才能允许长触摸启用触摸的设备来复制hover？ 我可以改变标记/使用JS等，但不能想到一个简单的方法来做到这一点。
好的，我已经解决了！ 它涉及到稍微改变CSS，并添加一些JS。
使用jQuery来简化：
$(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); });
在英语中：当您开始或结束触摸时，请打开或closures类hover_effect 。
然后，在你的HTML中，添加一个类hover到任何你想要的工作。 在你的CSS中，replace下面的任何一个实例：
element:hover { rule:properties; }
同
element:hover, element.hover_effect { rule:properties; }
只是为了增加实用性，还要把它添加到你的CSS中：
.hover { -webkit-user-select: none; -webkit-touch-callout: none; }
要停止浏览器要求您复制/保存/select图像或任何。
简单！
你所需要做的就是在父母上绑定touchstart。 像这样的东西将工作：
$('body').bind('touchstart', function() {});
你不需要在函数中做任何事情，把它留空。 这将足以让你保持联系，所以触摸的行为更像是：盘旋而不是像：主动。 iOS魔术。
尝试这个：
<script> document.addEventListener("touchstart", function(){}, true); </script>
并在你的CSS：
element:hover, element:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none /*only to disable context menu on long press*/ }
有了这个代码，你不需要额外的.hover类！
回答您的主要问题： “如何在支持触摸的浏览器中模拟hover触摸？
只需点击该元素（点击屏幕），然后使用JavaScript触发hover事件。
var p = document.getElementsByTagName('p')[0]; p.onclick = function() { // Trigger the `hover` event on the paragraph p.onhover.call(p); };
只要您的设备上存在hover事件（即使通常不使用），这应该可以正常工作。
更新：我刚刚在我的iPhone上testing这种技术，它似乎工作正常。 试试这里： http : //jsfiddle.net/mathias/YS7ft/show/light/
如果您想使用“长时间触摸”来触发hover，您可以使用上面的代码片段作为起点，并与计时器和东西玩得开心;）
进一步改进解决
首先我和富布拉德肖的方法一样 ，但是随后出现了问题。 通过在'touchstart'事件上执行e.preventDefault（） ，页面不再滚动，长按也不能激发选项菜单，双击缩放也不能完成执行。
一个解决scheme可以找出哪个事件被调用，只是e.preventDefault（）在后面的'touchend' 。 由于scroll的'touchmove'在'touchend'之前，默认情况下保持不变， 'click'也被阻止，因为它将事件链中的后缀应用到移动设备上，如下所示：
// Binding to the '.static_parent' ensuring dynamic ajaxified content $('.static_parent').on('touchstart touchend', '.link', function (e) { // If event is 'touchend' then... if (e.type == 'touchend') { // Ensuring we event prevent default in all major browsers e.preventDefault ? e.preventDefault() : e.returnValue = false; } // Add class responsible for :hover effect $(this).toggleClass('hover_effect'); });
但是，当选项菜单出现时，它不再触发负责切换课程的“touchend” ，下一次hover行为将相反，完全混淆。
然后，解决scheme将再次有条件地发现我们正在进行的事件，或者分别进行，并分别在'touchstart'和'touchend'上分别使用addClass（）和removeClass （） ，确保它始终以分别增加和删除，而不是有条件地决定它。 为了完成，我们还将删除callback绑定到“focusout”事件types，负责清除任何可能保持不变并且从未再次访问的链接hover类，如下所示：
$('.static_parent').on('touchstart', '.link', function (e) { $(this).addClass('hover_effect'); }); $('.static_parent').on('touchend focusout', '.link', function (e) { // Think double click zoom still fails here e.preventDefault ? e.preventDefault() : e.returnValue = false; $(this).removeClass('hover_effect'); });
注意：以前的两个解决scheme仍然会出现一些错误，并且还认为（未testing），双击缩放仍然失败。
整洁和希望Bug免费（不是:)）Javascript解决scheme
现在 ，只需使用javascript（在.hover类和pseudo：hover之间不混合），以及从通用（移动和桌面） “点击”事件直接调用ajax行为的angular度来看，第二种更干净，更整洁，反应更快的方法，我已经find了一个相当不错的回答问题，从这个问题我终于明白了如何将触摸和鼠标事件混合在一起，而没有几个事件callback不可避免地将对方的事件链改变成事件链。 就是这样：
$('.static_parent').on('touchstart mouseenter', '.link', function (e) { $(this).addClass('hover_effect'); }); $('.static_parent').on('mouseleave touchmove click', '.link', function (e) { $(this).removeClass('hover_effect'); // As it's the chain's last event we only prevent it from making HTTP request if (e.type == 'click') { e.preventDefault ? e.preventDefault() : e.returnValue = false; // Ajax behavior here! } });
触摸设备无法实现鼠标hover效果。 当我出现在相同的情况下safari ios我使用:active在CSS来生效。
即。
p:active { color:red; }
在我的情况下，它的工作。可能是这样的情况下，可以用于使用JavaScript。 只要试一试。
没有设备（或更确切地说，浏览器）特定的JS我敢肯定，你运气不好。
编辑：以为你想避免，直到我重读你的问题。 在Mobile Safari的情况下，您可以注册获取与使用本机UIView-s相似的所有触摸事件。 现在找不到文件，会尽力。
一种方法是在触摸开始时执行hover效果，然后在触摸移动或结束时移除hover效果。
自从你提到iPhone以来，这就是苹果对触摸处理的一般看法。
添加此代码，然后将类“tapHover”设置为您希望以此方式工作的元素。 第一次点击一个元素将获得伪类“：hover”和类“挖掘”。 点击事件将被阻止。 第二次点击相同的元素 – 单击事件将被触发。
// Activate only in devices with touch screen if('ontouchstart' in window) { // this will make touch event add hover pseudoclass document.addEventListener('touchstart', function(e) {}, true); // modify click event document.addEventListener('click', function(e) { // get .tapHover element under cursor var el = jQuery(e.target).hasClass('tapHover') ? jQuery(e.target) : jQuery(e.target).closest('.tapHover'); if(!el.length) return; // remove tapped class from old ones jQuery('.tapHover.tapped').each(function() { if(this != el.get(0)) jQuery(this).removeClass('tapped'); }); if(!el.hasClass('tapped')) { // this is the first tap el.addClass('tapped'); e.preventDefault(); return false; } else { // second tap return true; } }, true); }
.box { float: left; display: inline-block; margin: 50px 0 0 50px; width: 100px; height: 100px; overflow: hidden; font-size: 20px; border: solid 1px black; } .box.tapHover { background: yellow; } .box.tapped { border: solid 3px red; } .box:hover { background: red; }
<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div> <div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div> <div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
我个人的品味是将:hover样式归类为:focus状态，例如：
p { color: red; } p:hover, p:focus { color: blue; }
然后用下面的HTML：
<p id="some-p-tag" tabindex="-1">WOOOO</p>
和下面的JavaScript：
$("#some-p-tag").on("touchstart", function(e){ e.preventDefault(); var $elem = $(this); if($elem.is(":focus")) { //this can be registered as a "click" on a mobile device, as it's a double tap $elem.blur() } else { $elem.focus(); } });
本地Javascript和jQuery的混合：
var gFireEvent = function (oElem,sEvent) { try { if( typeof sEvent == 'string' && o.isDOM( oElem )) { var b = !!(document.createEvent), evt = b?document.createEvent("HTMLEvents"):document.createEventObject(); if( b ) { evt.initEvent(sEvent, true, true ); return !oElem.dispatchEvent(evt); } return oElem.fireEvent('on'+sEvent,evt); } } catch(e) {} return false; }; // Next you can do is (bIsMob etc you have to determine yourself): if( <<< bIsMob || bIsTab || bisTouch >>> ) { $(document).on('mousedown', function(e) { gFireEvent(e.target,'mouseover' ); }).on('mouseup', function(e) { gFireEvent(e.target,'mouseout' ); }); }
我发现最简单的解决scheme：我有一些<span>标签：hovercss规则。 我切换为<a href =“javascript：void（0）”>和voilà。 iOS中的hover样式开始工作。
使用也可以使用CSS，添加焦点和活动（IE7和以下）到隐藏的链接。 一个div菜单里带菜单的ul菜单示例：
.menu ul ul {display:none; position:absolute; left:100%; top:0; padding:0;} .menu ul ul ul {display:none; position:absolute; top:0; left:100%;} .menu ul ul a, .menu ul ul a:focus, .menu ul ul a:active { width:170px; padding:4px 4%; background:#e77776; color:#fff; margin-left:-15px; } .menu ul li:hover > ul { display:block; } .menu ul li ul li {margin:0;}
这是迟到，未经testing，应该工作;-)
