CSS3轉換流問題

Question

我在this page上設置了背景轉換。

的頁面的第一區「伊爾博客 - 萊吉合奏GLI articoli」和「GLI節慶活動 - 萊吉合奏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"); 
} 

Answer 1

您在包括第二過渡懸停是無用的。輕鬆進入，使其淡入淡出。

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 
    } 
}