blocks|key|1247833|text|如果没有特定于设备(或者更确切地说是浏览器)的JS，我敢肯定你不走运。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247834|编辑:在我重读你的问题之前，我还以为你想避免这个问题呢。在Mobile+Safari的情况下，您可以注册以获取所有触摸事件，类似于您可以使用原生UIView-s所做的操作。现在找不到文档，我会尝试的。|1247835|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Without device (or rather browser) specific JS I'm pretty sure you're out of luck.

Edit: thought you wanted to avoid that until i reread your question. In case of Mobile Safari you can register to get all touch events similar to what you can do with native UIView-s. Can't find the documentation right now, will try to though.

blocks|key|1247888|text|一种方法是在触摸开始时执行悬停效果，然后在触摸移动或结束时删除悬停效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247889|既然你提到了touch+handling，这就是苹果对iPhone的总体评价。|offset|length|1247890|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html^0|0|6|E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

One way to do it would be to do the hover effect when the touch starts, then remove the hover effect when the touch moves or ends.

This is what Apple has to say about <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html" rel="nofollow noreferrer">touch handling</a> in general, since you mention iPhone.

blocks|key|1247966|text|好了，我已经算出来了！它涉及到稍微更改CSS并添加一些JS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1247967|使用jQuery使其变得简单：|1247968|$(document).ready(function()+{
++++$('.hover').on('touchstart+touchend',+function(e)+{
++++++++e.preventDefault();
++++++++$(this).toggleClass('hover_effect');
++++});
});|code-block|syntax|javascript|1247969|在开始或结束触摸时，打开或关闭类hover_effect。|offset|length|style|CODE|1247970|然后，在您的HTML中，将类悬停添加到您想要使用的任何内容上。在CSS中，替换以下项的任何实例：|1247971|element:hover+{
++++rule:properties;
}|1247972|使用|1247973|element:hover,+element.hover_effect+{
++++rule:properties;
}|1247974|为了增加用处，还可以将此代码添加到CSS中：|1247975|.hover+{
-webkit-user-select:+none;
-webkit-touch-callout:+none;++++++++
}|1247976|停止浏览器询问您复制/保存/选择图像或其他内容。|1247977|简单！|1247978|entityMap^0|0|0|0|G|C|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@$K|1A|L|1B|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|1I|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

OK, I've worked it out! It involves changing the CSS slightly and adding some JS.

Using jQuery to make it easy:

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

In english: when you start or end a touch, turn the class <code>hover_effect</code> on or off.

Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

<pre><code>element:hover {
 rule:properties;
}
</code></pre>

with

<pre><code>element:hover, element.hover_effect {
 rule:properties;
}
</code></pre>

And just for added usefulness, add this to your CSS as well:

<pre><code>.hover {
-webkit-user-select: none;
-webkit-touch-callout: none; 
}
</code></pre>

To stop the browser asking you to copy/save/select the image or whatever.

Easy!

blocks|key|1248023|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1248024|<script>
document.addEventListener("touchstart",+function(){},+true);
</script>|code-block|syntax|javascript|1248025|在你的CSS中：|1248026|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*/
}|1248027|使用此代码，您不需要额外的.hover类！|1248028|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try this:

<pre><code>&lt;script&gt;
document.addEventListener("touchstart", function(){}, true);
&lt;/script&gt;
</code></pre>

And in your CSS:

<pre><code>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*/
}
</code></pre>

With this code you don't need an extra .hover class!

blocks|key|1033026|text|原生Javascript和jQuery的混合：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1033027|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'%2BsEvent,evt);
+}
+}+catch(e)+{}
+return+false;
};


//+Next+you+can+do+is+(bIsMob+etc+you+have+to+determine+yourself):

+++if(+<<<+bIsMob+%7C%7C+bIsTab+%7C%7C+bisTouch+>>>+)
+++{
+++++$(document).on('mousedown',+function(e)
+++++{
+++++++gFireEvent(e.target,'mouseover'+);
+++++}).on('mouseup',+function(e)
+++++{
+++++++gFireEvent(e.target,'mouseout'+);
+++++});
+++}|code-block|syntax|javascript|1033028|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A mix of native Javascript and jQuery:

<pre><code>var gFireEvent = function (oElem,sEvent) 
{
 try {
 if( typeof sEvent == 'string' &amp;&amp; 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( &lt;&lt;&lt; bIsMob || bIsTab || bisTouch &gt;&gt;&gt; )
 {
 $(document).on('mousedown', function(e)
 {
 gFireEvent(e.target,'mouseover' );
 }).on('mouseup', function(e)
 {
 gFireEvent(e.target,'mouseout' );
 });
 }
</code></pre>

blocks|key|1033098|text|你所需要做的就是在父级上绑定touchstart。像这样的东西将会起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1033099|$('body').on('touchstart',+function()+{});|code-block|syntax|javascript|1033100|你不需要在函数中做任何事情，把它留空。这将足以让鼠标悬停在触摸上，因此触摸行为更像是:hover，而不是:active。iOS魔术。|1033101|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

All you need to do is bind touchstart on a parent. Something like this will work:

<pre><code>$('body').on('touchstart', function() {});
</code></pre>

You don't need to do anything in the function, leave it empty. This will be enough to get hovers on touch, so a touch behaves more like :hover and less like :active. iOS magic.

blocks|key|1033128|text|我找到的最简单的解决方案是:我有一些带有:hover+css规则的<+span+>标签。我换成了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|entityMap^0^^$0|@$1|2|3|4|5|6|7|C|8|@]|9|@]|A|$]]]|B|$]]

Easyest solution I found: I had some &lt; span > tags with :hover css rules in them. I switched for &lt; a href="javascript:void(0)" > and voilà. The hover styles in iOS started working.

blocks|key|1248251|text|用户也可以使用CSS，为隐藏链接添加焦点和活动(适用于IE7及以下版本)。包含类菜单的div中的ul菜单示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1248252|.menu+ul+ul+{display:none;+position:absolute;+left:100%25;+top:0;+padding:0;}
.menu+ul+ul+ul+{display:none;+position:absolute;+top:0;+left:100%25;}
.menu+ul+ul+a,+.menu+ul+ul+a:focus,+.menu+ul+ul+a:active+{+width:170px;+padding:4px+4%25;+background:#e77776;+color:#fff;+margin-left:-15px;+}
.menu+ul+li:hover+>+ul+{+display:block;+}
.menu+ul+li+ul+li+{margin:0;}|code-block|syntax|javascript|1248253|它已经很晚了，而且没有经过测试，应该可以工作;-)|1248254|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use can use CSS too, add focus and active (for IE7 and under) to the hidden link. Example of a ul menu inside a div with class menu:

<pre><code>.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 &gt; ul { display:block; }
.menu ul li ul li {margin:0;}
</code></pre>

It's late and untested, should work ;-)

blocks|key|1248306|text|无法在触控设备中实现鼠标hover效果。当我在safari+ios中遇到同样的情况时，我在css中使用了:active来实现效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1248307|即。|1248308|p:active+{
++color:red;
}|code-block|syntax|javascript|1248309|在我的例子中，它的工作.May是，这也是可以在不使用javascript的情况下使用的情况。试一试吧。|1248310|entityMap^0|C|5|N|6|U|3|1G|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

The mouse <code>hover</code> effect cannot be implemented in touch device . When I'm appeared with same situation in <code>safari</code> <code>ios</code> I used <code>:active</code> in css to make effect.

ie.

<pre><code>p:active {
 color:red;
}
</code></pre>

In my case its working .May be this is also the case that can be used with out using javascript. Just give a try.

blocks|key|1033276|text|添加此代码，然后将"tapHover“类设置为您希望以这种方式工作的元素。当你第一次点击一个元素时，它将获得伪类":hover“和类”点击“。将阻止单击事件。第二次点击相同的元素-点击事件将被激发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1033277|​|1033278|//+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);
}|code-block|syntax|javascript|1033279|.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;
}|1033280|<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>|1033281|1033282|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Add this code and then set class "tapHover" to elements which you would like to work this way.
First time you tap an element it will gain pseudoclass ":hover" and class "tapped". Click event will be prevented.
Second time you tap the same element - click event will be fired.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"&gt;&lt;/div&gt;
&lt;div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"&gt;&lt;/div&gt;
&lt;div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|1033335|text|我个人的偏好是将:hover样式也归因于:focus状态，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1033336|p+{
++++color:+red;
}

p:hover,+p:focus+{
++++color:+blue;
}|code-block|syntax|javascript|1033337|然后使用以下HTML：|1033338|<p+id="some-p-tag"+tabindex="-1">WOOOO|1033339|和以下JavaScript：|1033340|$("#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();
++++}
});|1033341|entityMap^0|8|6|K|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

My personal taste is to attribute the <code>:hover</code> styles to the <code>:focus</code> state as well, like:

<pre><code>p {
 color: red;
}

p:hover, p:focus {
 color: blue;
}
</code></pre>

Then with the following HTML:

<pre><code>&lt;p id="some-p-tag" tabindex="-1"&gt;WOOOO&lt;/p&gt;
</code></pre>

And the following JavaScript:

<pre><code>$("#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();
 }
});
</code></pre>

With some HTML like this:

<pre><code>&lt;p&gt;Some Text&lt;/p&gt;
</code></pre>

Then some CSS like this:

<pre><code>p {
 color:black;
}

p:hover {
 color:red;
}
</code></pre>

How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can't think of an easy way to do this.

How do I simulate a hover with a touch in touch enabled browsers?

jQuery

使用一些类似如下的HTML：Some Text然后是一些像这样的CSS：p { color:black;}p:hover { color:red;}我如何才能允许在支持触摸的设备上进行长时间触摸来复制悬停？我可以更改标记/使用JS等，但想不出一个简单的方法来做到这一点。

问如何在支持触摸的浏览器中模拟悬停？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在支持触摸的浏览器中模拟悬停？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在支持触摸的浏览器中模拟悬停？
EN