加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – CSS延迟:活动选择器生效

发布时间:2020-12-14 22:44:33 所属栏目:资源 来源:网络整理
导读:我无法让我的CSS 3按钮正常运行.你可以在one of my project pages查看按钮.问题是在:活动的CSS选择器生效之前还有一秒左右的延迟,使按钮略微移动并改变阴影;它之前没有这样做过.这是Sass代码: @mixin transition($type,$time,$ease) { -webkit-transition:

我无法让我的CSS 3按钮正常运行.你可以在one of my project pages查看按钮.问题是在:活动的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,5px 5px 5px 0 #000000;

  -moz-box-shadow:
    1px 1px 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,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);
    }
  }
}

并将初始化脚本更改为: