blocks|key|909052|text|<body+ontouchstart="">
++++...
</body>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|909053|只需应用一次，而不是每个按钮元素似乎都能修复页面上的所有按钮。或者，您可以使用这个名为“Fastclick”的小型JS库。它加快了触摸设备上点击事件的速度，也解决了这个问题。|unstyled|offset|length|909054|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ftlabs/fastclick^0|0|18|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre class="lang-html prettyprint-override"><code>&lt;body ontouchstart=""&gt;
    ...
&lt;/body&gt;
</code></pre>

<p>Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called '<a href="https://github.com/ftlabs/fastclick">Fastclick</a>'. It speed up click events on touch devices and takes care of this issue too.</p>


blocks|key|908940|text|在您的标记中添加ontouchstart的事件处理程序。这使得CSS可以神奇地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908941|<a+ontouchstart="">Click+me</a>|code-block|syntax|javascript|908942|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|$]]

<p>Add an event handler for ontouchstart in your &lt;a> tag. This causes the CSS to magically work.</p>

<pre class="lang-html prettyprint-override"><code>&lt;a ontouchstart=""&gt;Click me&lt;/a&gt;
</code></pre>


blocks|key|909300|text|This适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|909301|document.addEventListener("touchstart",+function()+{},false);|code-block|syntax|javascript|909302|注意:如果你这样做，也值得删除使用以下CSS规则的Mobile+Safari应用的默认点击高亮颜色。|909303|html+{
++++-webkit-tap-highlight-color:+rgba(0,0,0,0);
}|909304|entityMap|0|LINK|mutability|MUTABLE|url|https://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/^0|0|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p><a href="https://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/" rel="noreferrer">This</a> works for me:</p>

<pre><code>document.addEventListener("touchstart", function() {},false);
</code></pre>

<p>Note: if you do this trick it is also worth removing the default tap–highlight colour Mobile Safari applies using the following CSS rule.</p>

<pre><code>html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</code></pre>


blocks|key|909254|text|截至2016年12月8日，在Safari10+(iPhone+5s)上，公认的答案(<body+ontouchstart="">...</body>)对我不起作用:这种黑客攻击只适用于那些在页面加载中可见的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|909255|但是，添加以下内容：|909256|<script+type='application/javascript'>
++document.addEventListener("touchstart",+function()+{},+false);
</script>|code-block|syntax|javascript|909257|head确实按照我想要的方式工作，缺点是现在滚动过程中的所有触摸事件也会在被触摸的元素上触发:active伪状态。(如果这对您有问题，您可以考虑FighterJet's+:hover解决方法。)|909258|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/33681490/341970^0|16|W|0|0|0|0|4|1A|7|2D|6|20|C|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$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|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>As of Dec 8, 2016, the accepted answer (<code>&lt;body ontouchstart=""&gt;...&lt;/body&gt;</code>) does not work for me on Safari 10 (iPhone 5s): That hack only works for those elements that were visible on page load.</p>

<p>However, adding:</p>

<pre class="lang-js prettyprint-override"><code>&lt;script type='application/javascript'&gt;
  document.addEventListener("touchstart", function() {}, false);
&lt;/script&gt;
</code></pre>

<p>to the <code>head</code> does work the way I want, with the downside that now all touch events during scrolling also trigger the <code>:active</code> pseudo-state on the touched elements. (If this is a problem for you, you might consider <a href="https://stackoverflow.com/a/33681490/341970">FighterJet's</a> <code>:hover</code> workaround.)</p>


blocks|key|909107|text|//hover+for+ios
-webkit-tap-highlight-color:+#ccc;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|909108|这对我很有效，添加到您想要突出显示的元素上的CSS中|unstyled|909109|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>//hover for ios
-webkit-tap-highlight-color: #ccc;
</code></pre>

<p>This works for me, add to your CSS on the element that you want to highlight </p>


blocks|key|908994|text|您是使用所有伪类还是只使用一个伪类？如果您至少使用两个，请确保它们的顺序是正确的，否则它们都会中断：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908995|a:link
a:visited
a:hover
a:active|code-block|syntax|javascript|908996|..in该订单。此外，如果您只是使用:active，则添加一个:link，即使您没有设置它的样式。|908997|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|$]]

<p>Are you using all of the pseudo-classes or just the one? If you're using at least two, make sure they're in the right order or they all break:</p>

<pre><code>a:link
a:visited
a:hover
a:active
</code></pre>

<p>..in that order. Also, If you're just using :active, add a:link, even if you're not styling it.</p>


blocks|key|909505|text|对于那些不想使用ontouchstart的人，您可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|909506|<script>
+document.addEventListener("touchstart",+function(){},+true);
</script>|code-block|syntax|javascript|909507|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|$]]

<p>For those who don't want to use the ontouchstart, you can use this code</p>

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


blocks|key|909372|text|我已经发布了一个工具，可以为您解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|909373|从表面上看，问题看起来很简单，但实际上需要对触摸和点击行为进行广泛的定制，包括超时功能和“当您滚动链接列表时会发生什么”或“当您按下link然后将鼠标/手指从活动区域移开时会发生什么”|909374|这应该可以一次解决所有问题：https://www.npmjs.com/package/active-touch|offset|length|909375|您需要将:active样式分配给.active类，或者选择您自己的类名。默认情况下，该脚本将与所有link元素一起工作，但您可以使用自己的选择器数组覆盖它。|909376|诚实，有用的反馈和贡献非常感谢！|909377|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/active-touch^0|0|0|E|16|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<p>I've published a tool that should solve this issue for you.</p>

<p>On the surface the problem looks simple, but in reality the touch &amp; click behaviour needs to be customized quite extensively, including timeout functions and things like "what happens when you scroll a list of links" or "what happens when you press link and then move mouse/finger away from active area"</p>

<p>This should solve it all at once: <a href="https://www.npmjs.com/package/active-touch" rel="nofollow noreferrer">https://www.npmjs.com/package/active-touch</a></p>

<p>You'll need to either have your :active styles assigned to .active class or choose your own class name. By default the script will work with all link elements, but you can overwrite it with your own array of selectors.</p>

<p>Honest, helpful feedback and contributions much appreciated!</p>


blocks|key|909430|text|一种解决方案是依靠:target而不是:active|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|909431|<style>+
a:target+{+
++++background-color:+red;
}
</style>

<a+id="click-me"+href="#click-me">Click+me</a>|code-block|syntax|javascript|909432|当锚点以当前url为目标时，样式将被触发，即使在移动设备上也是健壮的。缺点是你需要一个其他的链接来清除url中的锚。完整示例：|909433|​|909434|a:target+{+
++++background-color:+red;
}|909435|<a+id="click-me"+href="#click-me">Click+me</a>
<a+id="clear"+href="#">Clear</a>|909436|909437|entityMap^0|9|7|J|7|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|12|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|U|$]]

<p>A solution is to rely on <code>:target</code> instead of <code>:active</code>:</p>

<pre><code>&lt;style&gt; 
a:target { 
    background-color: red;
}
&lt;/style&gt;
&lt;!-- snip --&gt;
&lt;a id="click-me" href="#click-me"&gt;Click me&lt;/a&gt;
</code></pre>

<p>The style will be triggered when the anchor is targeted by the current url, which is robust even on mobile. The drawback is you need an other link to clear the anchor in the url. Complete example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a:target { 
    background-color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="click-me" href="#click-me"&gt;Click me&lt;/a&gt;
&lt;a id="clear" href="#"&gt;Clear&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1124158|text|没有100%25与这个问题相关，但你也可以使用css兄弟黑客来实现这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1124159|HTML|1124160|<input+tabindex="0"+type="checkbox"+id="145"/>
<label+for="145">+info</label>
<span>+sea</span>|code-block|syntax|javascript|1124161|SCSS|1124162|input+{
++++&:checked+%2B+label+{
++++++background-color:+red;
++++}
++}|1124163|如果您想使用纯html/css工具提示|1124164|span+{
++display:+none;
}
input+{
++++&:checked+~+span+{
++++++display:+block;
++++}
++}|1124165|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>No 100% related to this question,
but you can use css sibling hack to achieve this as well</p>

<p>HTML</p>

<pre><code>&lt;input tabindex="0" type="checkbox" id="145"/&gt;
&lt;label for="145"&gt; info&lt;/label&gt;
&lt;span&gt; sea&lt;/span&gt;
</code></pre>

<p>SCSS</p>

<pre><code>input {
    &amp;:checked + label {
      background-color: red;
    }
  }
</code></pre>

<p>If you would like to use pure html/css tooltip</p>

<pre><code>span {
  display: none;
}
input {
    &amp;:checked ~ span {
      display: block;
    }
  }
</code></pre>


blocks|key|1124029|text|<!DOCTYPE+html>

<html+lang="en">

<head>
<meta+charset="utf-8">

<title></title>

<style>
++++++++a{color:+red;}
++++++++a:hover{color:+blue;}
</style>
</head>

<body>

++++++++<div+class="main"+role="main">
++++++++++++++++<a+href="#">Hover</a>
++++++++</div>

</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1124030|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="utf-8"&gt;

&lt;title&gt;&lt;/title&gt;

&lt;style&gt;
        a{color: red;}
        a:hover{color: blue;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

        &lt;div class="main" role="main"&gt;
                &lt;a href="#"&gt;Hover&lt;/a&gt;
        &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


<p>In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an <code>&lt;a&gt;</code> tag doesn't trigger when you tap on the element. How can I get this to trigger? Example code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;style&gt; 
a:active { 
    background-color: red;
}
&lt;/style&gt;
&lt;!-- snip --&gt;
&lt;a href="#"&gt;Click me&lt;/a&gt;
</code></pre>


:active pseudo-class doesn't work in mobile safari

在iPhone/iPad/iPod上的Webkit中，为<a>标记指定:active伪类的样式不会在您点击元素时触发。我怎么才能触发它呢？示例代码：<style> a:active {     background-color: red;}</style><a href="#">Click me</a>

问：活动伪类在移动safari中不起作用
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问：活动伪类在移动safari中不起作用EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问：活动伪类在移动safari中不起作用
EN