このページに背景遷移を設定しました。
ページの最初の領域"Il Blog - 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");
}