Fatal编程技术网
  • iphone/
  • Iphone ：活动伪类不'；我不能在移动狩猎中工作

Iphone ：活动伪类不'；我不能在移动狩猎中工作

iphone css

Iphone ：活动伪类不'；我不能在移动狩猎中工作,iphone,css,webkit,mobile-safari,pseudo-class,Iphone,Css,Webkit,Mobile Safari,Pseudo Class,在iPhone/iPad/iPod上的Webkit中，为在标记中添加ontouchstart的事件处理程序。这使得CSS神奇地工作 点击我 您使用的是所有的伪类还是只有一个？如果您至少使用了两个，请确保它们的顺序正确，否则它们都会损坏： a:link a:visited a:hover a:active …按顺序。此外，如果您只是使用：active，请添加一个：链接，即使您没有对其进行样式设置。 ... 只应用一次，而不是每个按钮元素似乎修复了页面上的所有按钮。或者，您可以使用这个名为“”的

在iPhone/iPad/iPod上的Webkit中，为
在标记中添加ontouchstart的事件处理程序。这使得CSS神奇地工作

点击我
您使用的是所有的伪类还是只有一个？如果您至少使用了两个，请确保它们的顺序正确，否则它们都会损坏：

a:link
a:visited
a:hover
a:active
…按顺序。此外，如果您只是使用：active，请添加一个：链接，即使您没有对其进行样式设置。


...
只应用一次，而不是每个按钮元素似乎修复了页面上的所有按钮。或者，您可以使用这个名为“”的小JS库。它加快了触摸设备上的点击事件并解决了这个问题。



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


a{颜色：红色；}
a:悬停{颜色：蓝色；}
这对我来说很有效，添加到你想要突出显示的元素的CSS中。正如其他答案所述，iOS Safari不会触发
：active
伪类，除非元素上附加了触摸事件，但到目前为止，这种行为是“神奇的”。我在网站上看到了这个小广告，它解释了这一点（我的重点）：

您还可以使用
-webkit tap highlight color
CSS属性，结合设置触摸事件来配置按钮，使其行为类似于桌面在iOS上，鼠标事件发送得如此之快，以至于从未接收到“关闭”或“活动”状态。因此，只有在HTML元素上设置了触摸事件时才会触发
：active
伪状态，例如，在元素上设置了ontouchstart，如下所示：

<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>
将事件附加到所有元素，而不是依赖于冒泡到主体的事件（使用jQuery）：

然而，我不知道这对性能的影响，所以要小心

编辑：此解决方案存在一个严重缺陷：即使在滚动页面时触摸元素，也会激活
：active
伪状态。敏感性太强了。Android通过在状态显示之前引入一个非常小的延迟来解决这个问题，如果页面被滚动，这个延迟就会被取消。有鉴于此，我建议仅在选定的元素上使用此选项。在我的例子中，我正在开发一个web应用程序，用于该领域，它基本上是一个按钮列表，用于导航页面和提交操作。因为在某些情况下，整个页面几乎都是按钮，这对我不起作用。但是，您可以将
：hover
伪状态改为填充此状态。禁用默认灰色框后，此选项将非常有效。

没有100%与此问题相关， 但您也可以使用css同级黑客来实现这一点

HTML

如果您想使用纯html/css工具提示

span {
  display: none;
}
input {
    &:checked ~ span {
      display: block;
    }
  }
截至2016年12月8日，公认的答案（
…
）对我在Safari 10（iPhone 5s）上不起作用：这种破解只适用于页面加载时可见的元素

不过，加入：


addEventListener（“touchstart”，function（）{}，false）；
到
头部
确实按照我想要的方式工作，缺点是现在滚动期间的所有触摸事件也会触发被触摸元素上的
：active
伪状态。（如果这对你来说是个问题，你可能会考虑<代码>：悬停解决方法。）

为我工作：

document.addEventListener("touchstart", function() {},false);
注意：如果您使用此技巧，还需要删除默认的点击-高亮显示颜色Mobile Safari，使用以下CSS规则

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
我已经发布了一个工具，可以为您解决这个问题

从表面上看，这个问题看起来很简单，但实际上，触摸和点击行为需要大量定制，包括超时功能和类似“滚动链接列表时会发生什么”或“按下链接然后将鼠标/手指从活动区域移开时会发生什么”之类的事情

这应该一次解决所有问题：

您需要将：活动样式分配给.active类，或者选择自己的类名。默认情况下，脚本将使用所有链接元素，但您可以使用自己的选择器数组覆盖它

非常感谢诚实、有益的反馈和贡献

解决方案是依靠
：target
而不是
：active
：

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
对于不想使用ontouchstart的用户，您可以使用此代码

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>


addEventListener（“touchstart”，function（）{}，true）；
我尝试了它的各种版本，但似乎没有一个能可靠地工作（我不喜欢用“魔法”来处理这样的东西）。因此，我做了以下工作，这在所有平台上都能完美运行，不仅仅是苹果公司：

  • 将使用
    ：active
    的css声明重命名为
    .active
  • 列出所有受影响的元素，并添加
    pointerdown/mousedown/touchtstart
    事件处理程序以应用
    .active
    类和
    pointerup/mouseup/touchend
    事件处理程序以将其删除。使用jQuery：

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

    let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";

let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
    $(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
    $(this).removeClass('active');
});

    让controlActivationEvents=window.PointerEvent？“指针向下”：“touchstart mousedown”；
让controlDeactivationEvents=window.PointerEvent？“pointerup pointerleave”：“touchend mouseup mouseleave”；
让clickableThings=''；
$（clickableThings）.on（controlActivationEvents，函数（e）{
$（this.addClass（'active'）；
}).on（控制停用事件，功能（e）{
$（this.removeClass（'active'）；
});
    • 这有点乏味，但现在我有了一个解决方案，它不太容易在苹果操作系统版本之间被破坏。（谁需要这样的中断？

    在没有
    =”
    的情况下，简单地将
    添加到TouchStart
    就足够了吗？（HTML5）对于未来的读者，我在这里发布了一个演示：。检查你的iOS设备上的功能。你能解释一下为什么你对body应用了一个空的侦听器吗？它是如何工作的？我用了：focus和t 
    html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

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

    <script>
 document.addEventListener("touchstart", function(){}, true);
</script>

    let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";

let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
    $(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
    $(this).removeClass('active');
});