0

我在此页面上设置了背景过渡。

“Il 博客 - Leggi tutti gli articoli”和“Gli Eventi - Leggi tutti gli eventi”页面的第一个区域在图块中显示了不同帖子类型的列表。当悬停在其中一个上时，过渡开始。当移出鼠标时，另一个过渡开始。直到那里一切都好。

当我在过渡完成之前将鼠标移出磁贴时出现问题。

我试图弄清楚我的 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");
}
4

1 回答 1

0

您在悬停中包含的第二个过渡是无用的。缓入淡出使它淡入淡出。

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
    }
}
于 2013-05-14T11:22:46.227 回答