CSS3转换流的问题



我在这个页面上设置了一个背景过渡。

页面"Il Blog - Leggi tutti gli articoli""gli Eventi - Leggi tutti gli Eventi"的第一个区域以tile的形式显示了不同类型文章的列表。当将鼠标悬停在其中一个上时,转换开始。当移出鼠标时,另一个过渡开始。在那之前一切都很好。

当我在转换完成之前将鼠标移出tile时,问题就出现了。

我试图找出我的CSS中缺少什么,但我找不到它。

我知道我可能可以解决这个问题移动到一个jQuery脚本的过渡,但我更喜欢使用CSS的方法。

以下是相关元素的SCSS摘录:

article {
    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out);
    @include border-radius(2px);
    background-image: url('../images/concrete_wall.png');
    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');
    }
}
下面是生成的CSS,以防有人喜欢这样看:
body.home #posts-area #posts-area-columns #home-posts-list article, body.home #posts-area #posts-area-columns #featured-events-list article {
  -webkit-box-shadow: 0 0 2px #222222;
  -moz-box-shadow: 0 0 2px #222222;
  box-shadow: 0 0 2px #222222;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-image: url("../images/concrete_wall.png");
}
/* line 60, ../sass/_home.scss */
body.home #posts-area #posts-area-columns #home-posts-list article:hover, body.home #posts-area #posts-area-columns #featured-events-list article:hover {
  -webkit-box-shadow: 0 0 4px #222222;
  -moz-box-shadow: 0 0 4px #222222;
  box-shadow: 0 0 4px #222222;
  background-image: url("../images/concrete_wall_2.png");
}

你在hover中包含的第二个过渡是无用的。easy -in-out可以让它逐渐淡入和淡出。

article {
    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out); //Note i changed it to eas-in-out
    @include border-radius(2px);
    background-image: url('../images/concrete_wall.png');
    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');
      //Note I removed the unnecessary transition
    }
}

相关内容

  • 没有找到相关文章

最新更新