Question

我想在锚链接下方实现滚动线的效果，以满足客户简介 - 我愚蠢地想象一下CSS3很容易实现这一点，没有任何麻烦，所以我设置的东西沿着以下代码，由于我不理解的一个非常烦人的错误，花了一个小时在桌面上敲我的头。

桌面上的一切都很棒，但在移动设备上（iOS和Android）我在选择链接时遇到问题 - 首先点击，动画运行，我必须再次点击才能触发链接（同样适用于以下的codepen）。令我困惑的是，我想知道是否有人能为我发光任何事情!!？

http://codepen.io/pablodancer/pen/ZLJVOP

＆＃13;

li {
  display: inline-block;
  list-style-type: none;
}
li a {
  text-decoration: none;
  position: relative;
  line-height: 1;
  height: auto;
  padding: 0;
  margin-right: 8px;
  padding-bottom: 8px;
  z-index: 1;
}
li a:after {
  display: block;
  left: 0;
  bottom: 0;
  margin-top: 4px;
  width: 0;
  height: 5px;
  background-color: blue;
  content: "";
  z-index: -3;
  transition: width 0.3s;
}
li a:hover:after,
li.active a:after {
  width: 100%;
}

＆＃13;

<ul>
  <li class="active"><a href="http:www.nme.com">nme</a></li>
  <li><a href="http:www.bbc,co.uk">bbc</a></li>
  <li><a href="">blah3</a></li>
  <li><a href="">blah4</a></li>
  <li><a href="">blah5</a></li>
</ul>

＆＃13;

Answer 1

我认为双击问题只与iOS有关。我通常做的只是隐藏触摸设备上的伪元素，下面的方法都可以。

（1）使用CSS媒体查询，它适用于iOS 9+和Android 5 +。

@media (hover: none) {
  li a:after {
    display: none;
  }
}

（2）使用一点Javascript + CSS：

(function(html) {
  html.className += ('ontouchstart' in window) ? ' touch ' : ' no-touch ';
})(document.documentElement);

.touch li a:after {
  display: none;
}

此外，如果您希望保持活动样式，可以使用选择器li:not(.active) a:after。您可能还想设置li {vertical-align: top;}，以便项目可以很好地排队。

Answer 2

这是由WebKit在IOS上采用的非标准行为引起的。

怪异（但很常见）的问题需要怪异（简单）的破解，这是我仅通过CSS和防弹浏览器支持解决的方法。

基本上，魔术使用的是transforms，并且IOS / WebKit不会将伪元素视为隐藏元素，因此在悬停显示时不会强制两次轻敲行为：

li a:after {
  /* keep the element 'visible' and with a size */
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  ...
  /* then 'hide' it with a transform */
  transform: scaleX(0);
  ...
  /* add a nice transition */
  transition: transform 600ms ease;
}

li a:hover:after {
  /* 'show' the element by resetting the transform */
  transform: scaleX(1);
}

到现在为止，它似乎可以解决问题，为什么呢？因为在页面的重排中没有计算转换元素的大小：）

链接iOS中的伪元素双击问题

2 个答案: