css - CSS :ホバートランジションの後

Question

HTML 構造

<div id="small_gal">
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
</div>

画像にはドロップシャドウがあるためborder、画像の外側になるため、解決策ではありません

境界線に遷移があり、FF ではスムーズに動作しますが、chrome や他のブラウザーでは動作しません

これが私が使用したコードです

#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
    content: '';
    position: absolute;
    width: 112px;
    height: 81px;
    border: 3px solid #e27501;
    left: 9px; top: 9px;
    z-index: 9;

    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
    opacity: 1;
}

ノート：

#small_gal

:after を実装できるように、各画像が div でラップされているコンテナーのみです。

Answer 1

:beforeFirefox 4+ は、やなどの疑似要素の遷移をサポートする唯一のブラウザーです:after。

ソース: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Answer 2

CSS トランジションは WebKit ではまだ実験段階であるため、::after 疑似セレクターに関連するエッジケースのバグに遭遇した可能性があります。border-colorそれを完全に避けて、代わりに移行することをお勧めします。これはChromeとSafariでうまくいきました：

#small_gal div.p {
    border: 2px solid transparent;
    -webkit-transition: border-color 1s ease-in;
}

#small_gal div.p:hover {
    border-color: orange;
}