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

只是每个图像都包含在div中的容器,所以我们可以实现:after

Answer 1

Firefox 4+是唯一支持转换伪元素(如:before和)的浏览器:after.

资料来源:http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/