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中,因此我们可以实现:在
之后答案 0 :(得分:15)
Firefox 4+是唯一支持转换:before
和:after
等伪元素的浏览器。
来源:http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
答案 1 :(得分:3)
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;
}
答案 2 :(得分:1)
如果您可以在元素本身上定义属性并在伪元素中使用inherit
,则可以对伪元素使用CSS转换,如:before和:after。因此,在您的情况下,您可以在opacity
上进行转换,而不是在border-color
上进行转换。
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#small_gal div {
border-color: transparent;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: border-color 0.5s ease-in-out;
-moz-transition: border-color 0.5s ease-in-out;
-o-transition: border-color 0.5s ease-in-out;
-ms-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
}
#small_gal div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-color: inherit;
border-style: solid;
border-width: 3px;
left: 0;
top: 0;
}
#small_gal div:hover {
border-color: #e27501;
}
#small_gal div img {
display: block;
height: auto;
max-width: 150px;
width: auto;
}
<div id="small_gal">
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
</div>