如何使用触控启用的浏览器模拟悬停？

Question

使用这样的HTML：

<p>Some Text</p>

然后有些像这样的CSS：

p {
  color:black;
}

p:hover {
  color:red;
}

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

Answer 1

好的，我已经解决了！它涉及稍微改变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;        
}

停止要求您复制/保存/选择图像的浏览器。

容易！

Answer 2

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

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

您无需在该功能中执行任何操作，请将其留空。这足以让人在触摸时盘旋，因此触摸行为更像是：悬停而不像：活跃。 iOS魔术。

Answer 3

试试这个：

<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类！

Answer 4

回答您的主要问题： “如何通过触控启用浏览器来模拟悬停？”

只需允许“点击”该元素（通过点击屏幕），然后使用JavaScript触发hover事件。

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/

如果你想使用“长触摸”来触发悬停，你可以使用上面的代码片段作为起点，享受定时器和东西的乐趣;）

Answer 5

进一步改进的解决方案

首先，我采用了 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');
});

然而，当出现选项菜单时，它不再触发负责切换课程的'touchend'，而下次悬停行为则相反，完全混淆了。

然后，解决方案将有条件地找出我们所处的事件，或者只是单独执行，并使用 addClass（）和 removeClass（）分别在'touchstart'和'touchend'上，确保它始终分别通过添加和删除而不是有条件地决定它来开始和结束。为了完成，我们还将删除回调绑定到'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类和伪：悬停之间没有混合），你可以直接调用你的ajax行为通用（移动和桌面）'点击'事件，我发现了a pretty well answered question，我终于明白了如何将触摸和鼠标事件混合在一起而没有多个事件回调不可避免地改变彼此的事件事件链。方法如下：

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

Answer 6

鼠标hover效果无法在触控设备中实现。当我在safari ios中出现相同情况时，我在css中使用:active来生效。

即

p:active {
  color:red;
}

在我的情况下它的工作。也许这也是可以使用javascript使用的情况。试试吧。

Answer 7

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

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

Answer 8

没有设备（或更确切地说是浏览器）特定的JS，我很确定你运气不好。

编辑：以为你想要避免这种情况，直到我重读你的问题。对于Mobile Safari，您可以注册以获取与您使用本机UIView-s类似的所有触摸事件。现在找不到文档，但会尝试。

Answer 9

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

一般来说，这就是Apple对touch handling所说的内容，因为你提到了iPhone。

Answer 10

我个人的口味是将$('#create-account').click(function (e) { var country = $('#country option:selected').text(); alert(country); }); var country_arr = new Array("Afghanistan", "Albania",........); // States var s_a = new Array(); s_a[0]=""; s_a[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol"; s_a[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore"; ......... function populateStates( countryElementId, stateElementId ){ var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex; var stateElement = document.getElementById( stateElementId ); stateElement.length=0; // Fixed by Julian Woods stateElement.options[0] = new Option('Select State',''); stateElement.selectedIndex = 0; var state_arr = s_a[selectedCountryIndex].split("|"); for (var i=0; i<state_arr.length; i++) { stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]); } } function stateChange(country) { for(var pos=0;pos<=country_arr.length;pos++) { if (country==country_arr[pos]) { break; } } ++pos; if(pos<253) { populateState(pos); } } function populateState(countryId) { var state_arr = s_a[countryId].split("|"); var select = document.getElementById('state'); for(var s = select.options.length - 1 ; s >= 0 ; s--) { select.remove(s); } for (var i = 0; i<state_arr.length; i++){ var opt = document.createElement('option'); opt.value = state_arr[i]; opt.innerHTML = state_arr[i]; select.appendChild(opt); } } 样式归因于:hover州，例如：

:focus

然后使用以下HTML：

p {
    color: red;
}

p:hover, p:focus {
    color: blue;
}

以下JavaScript：

<p id="some-p-tag" tabindex="-1">WOOOO</p>

Answer 11

本机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' );
     });
   }

Answer 12

我发现最简单的解决方案：我有一些＆lt; span＆gt;标签：hover css规则。我换了＆lt; a href =“javascript：void（0）”＆gt;瞧。 iOS中的悬停样式开始起作用。

Answer 13

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

这是迟到的，未经测试，应该工作; - ）

Answer 14

已解决2019-鼠标悬停

现在看来，最好避免将悬停与ios一起使用，或者通常避免触摸。只要保持触摸状态，以下代码就会应用您的CSS，并且不会出现其他ios弹出窗口。这样做；

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

   < / li>

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上进行了测试。