好的，我已经解决了！它涉及稍微更改 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()，页面不再滚动，并且长按既不能触发选项菜单，也不能双击缩放完成执行。

溶液可以找出哪些事件被称为，只是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');
});

但是，当出现选项菜单时，它不再触发“触摸”负责切换类，下次悬停行为将是另一个方式，完全混合。

一个解决方案是，再次有条件地找出我们在哪个事件中，或者只是做单独的事件，并分别在'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 类和伪 :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!
    }
});