CSS中:active选择器生效的延迟问题

Question

CSS中:active选择器生效的延迟问题

5

我在让我的CSS 3按钮正常运作方面遇到了困难。您可以在我的一个项目页面上查看该按钮。问题在于，:active CSS选择器生效之前会有一两秒的延迟，导致按钮稍微移动并改变阴影；之前它没有这样做。以下是Sass代码：

@mixin transition($type, $time, $ease) {
  -webkit-transition: $type $time $ease;
  transition: $type $time $ease;
}

@mixin border-radius($length) {
  border-radius: $length;
  -webkit-border-radius: $length;
  -moz-border-radius: $length;
}

.project-download {
  color: #000300;
  background-color: #00910A;
  padding: 10px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-weight: bold;

  @include transition(background-color, 0.2s, linear);
  @include border-radius(10px);

  box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  -webkit-box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  -moz-box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  &:hover { background-color: #00B00C; }
  &:active {
    box-shadow: 1px 1px 5px 0 #000000;
    -webkit-box-shadow: 1px 1px 5px 0 #000000;    
    -moz-box-shadow: 1px 1px 5px 0 #000000;
    top: 4px;
    left: 4px;
  }
}

这在 CSS 中的翻译是：

.project-download {
  color: #000300;
  background-color: #00910A;
  padding: 10px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-weight: bold;

  box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  -webkit-box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  -moz-box-shadow:
    1px 1px 0 0 #014D06,
    2px 2px 0 0 #014D06,
    3px 3px 0 0 #014D06,
    4px 4px 0 0 #014D06,
    5px 5px 5px 0 #000000;

  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

.project-download:active {
  box-shadow: 1px 1px 5px 0 #000000;
  -webkit-box-shadow: 1px 1px 5px 0 #000000;    
  -moz-box-shadow: 1px 1px 5px 0 #000000;
  top: 4px;
  left: 4px;
}

.project-download:hover { background-color: #00B00C; }

我在谷歌上搜索了一下，没有找到答案。有什么想法吗？

编辑：我通过使用这个JavaScript函数解决了Clicky所引起的问题：

function removeLinkListeners()
{
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; i++)
  {
    if (links[i].classList.contains('project-download-link'))
    {
      links[i].removeEventListener('mousedown', clicky.outbound);
    }
  }
}

将初始化脚本更改为：

<script type="text/javascript">
try
{
  clicky.init(234973);
  window.onload = removeLinkListeners;
}
catch(e) {}
</script>

- BlackBulletIV

@Ibu 你用的是哪个浏览器？并且你有禁用 JavaScript 吗？ - BlackBulletIV

我现在正在使用Safari，在一台旧的PowerBook G4 Mac OS 10.4上，没有延迟。 - Ibu

@Ibu 这很奇怪。我在Safari中进行了测试，也遇到了同样的延迟。但是你可能会注意到，如果你禁用了JavaScript，就不会有任何延迟。 - BlackBulletIV

也许你应该检查一下你的 JavaScript。 - Ibu

@Ibu，你看过我在下面答案中的评论了吗？我已经找出了引起问题的脚本。 - BlackBulletIV

显示剩余8条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

如果您将代码放在jsfiddle示例中...

http://jsfiddle.net/zfFtv/

你会注意到没有延迟。所以我怀疑是你的 JavaScript 有问题。也许 getclicky 代码不够高效，导致你点击时出现了延迟？试着逐个禁用你的 js 文件来找出问题所在。