我在这个页面上设置了一个背景过渡。
页面"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
}
}