如何在启用触摸的浏览器中通过触摸模拟悬停？

使用这样的HTML：

<p>Some Text</p>

然后像这样的一些CSS：

p {
  color:black;
}

p:hover {
  color:red;
}

如何允许在启用触摸的设备上进行长时间触摸来复制悬停？我可以更改标记/使用JS等，但是想不出一种简单的方法来做到这一点。

好的，我已经解决了！它涉及稍微更改CSS并添加一些JS。

使用jQuery使其变得容易：

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

用英语：当您开始或结束触摸时，请打开hover_effect或关闭课程。

然后，在您的HTML中，将类悬停添加到您希望其使用的任何内容。在CSS中，替换以下任何实例：

element:hover {
    rule:properties;
}

与

element:hover, element.hover_effect {
    rule:properties;
}

只是为了增加实用性，还可以将其添加到CSS中：

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

要停止浏览器要求您复制/保存/选择图像或其他操作。

简单！

您需要做的就是在父级上绑定touchstart。这样的事情会起作用：

$('body').on('touchstart', function() {});

您无需在函数中执行任何操作，将其留空。这足以使鼠标悬停，因此触摸的行为更像：hover而不太像：active。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 触发事件即可。

var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `hover` event on the paragraph
 p.onhover.call(p);
};

只要hover您的设备上存在某个事件（即使通常不使用该事件），它就可以正常工作。

更新：我刚刚在我的iPhone上测试了这项技术，它似乎工作正常。在这里尝试：http : //jsfiddle.net/mathias/YS7ft/show/light/

如果您想使用“长按”来触发悬停，则可以使用上面的代码段作为起点，并喜欢使用计时器和其他东西;）

进一步改进的解决方案

首先，我采用了Rich Bradshaw的方法，但是随后出现了问题。通过在“ touchstart”事件上执行e.preventDefault（），页面将不再滚动，长按也无法触发选项菜单，双击缩放也无法完成执行。

一个解决方案可能是找出正在调用哪个事件，而仅在后面的事件“ touchend”中找到e.preventDefault（）。由于滚动的'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');
});

但是，当出现选项菜单时，它将不再触发负责切换课程的“触摸端”，而下一次悬停行为将完全相反。

然后，解决方案将是，有条件地找出我们处于哪个事件中，或者只是单独进行一个事件，然后分别在'touchstart'和'touchend'上使用addClass（）和removeClass （），以确保该事件始终以分别添加和删除，而不是有条件地决定。最后，我们还将绑定移除回调与'focusout'事件类型绑定，以负责清除可能停留且永远不会再次访问的任何链接的悬停类，如下所示：

$('.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');
});

注意：前面两个解决方案中仍然存在一些错误，并且还认为（未经测试），双击缩放仍然失败。

整洁且希望没有错误（不是:)）Javascript解决方案

现在，第二个更清洁，更整洁且响应更快的方法仅使用javascript（在.hover类和pseudo：hover之间没有混合），并且您可以从那里直接调用通用（移动和桌面）“ click”事件的ajax行为，我发现了一个很好回答的问题，从中我终于了解了如何将触摸和鼠标事件混合在一起，而又不会不可避免地在事件链中改变彼此的事件回调。这是如何做：

$('.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就可以使用。试一试。

添加此代码，然后将类“ tapHover”设置为您要以此方式工作的元素。第一次点击元素时，它将获得伪类“：hover”和类“ tapped”。点击事件将被阻止。第二次单击同一元素-将触发click事件。

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

没有设备（或浏览器）特定的JS，我很确定您不走运。

编辑：以为您想避免这种情况，直到我重新阅读您的问题。对于Mobile Safari，您可以注册以获取所有触摸事件，类似于使用本机UIView-s可以进行的操作。目前找不到文档，请尝试尝试。

一种方法是在触摸开始时执行悬停效果，然后在触摸移动或结束时删除悬停效果。

自从您提到iPhone以来，这就是Apple 通常在触摸处理方面要说的话。

我个人的喜好是将: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();
    }
});

已解决的2019-触摸时悬停

现在看来，最好避免将悬停与ios一起使用，或者通常避免触摸。下面的代码只要保持触摸就适用您的CSS，并且没有其他ios弹出按钮。做这个;

1. jQuery添加：$（“ p”）。on（“ touchstart”，function（e）{$（this）.focus（）; e.preventDefault（）;}）;

2. CSS：将p：hover替换为p：focus，然后添加p：active

选项；

• 用任何类替换jquery p选择器

• 要保持效果，请同时保持p：hover并添加body {cursor：ponter;}，以便在任意位置轻按即可结束

• 尝试单击和鼠标悬停事件以及同一代码中的touchstart（但未经测试）

• 删除e.preventDefault（）; 使用户能够利用ios弹出按钮，例如复制

笔记

• 仅针对文本元素进行测试，ios可能会以不同方式对待输入等

• 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上进行了测试。

原生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' );
     });
   }

我找到的最简单的解决方案：我有一些<span>标签，其中包含：hover css规则。我换了<a href =“ javascript：void（0）”>和voilà。iOS中的悬停样式开始起作用。

使用也可以使用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;}

已经晚了并且未经测试，应该可以工作;-)