CSS:悬停后转换 [英] CSS :after hover Transition
本文介绍了CSS:悬停后转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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
不是解决方案,因为它会在图像之外
The images are having dropshadows so border
is not a solution, as it will be outside the image
这是我使用的代码
#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中,因此我们可以实现:
is only the container each image is wrapped in a div so we can implement :after
推荐答案
Firefox 4+浏览器支持伪元素的转换,例如:之前
和:之后
。
Firefox 4+ is the only browser that supports the transitioning of pseudo-elements such as :before
and :after
.
资料来源: http:// css-tricks .com / 13555-transitions-and-animations-on-css-generated-content /
这篇关于CSS:悬停后转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文