HTML结构
图片具有下拉阴影,因此
边框具有过渡效果,在FF上可以平稳运行,但在Chrome或其他浏览器上无法正常工作。
这是我使用的代码。
<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
不是解决方案,因为它会在图片外部。
![enter image description here](https://istack.dev59.com/hH4HJ.webp)
![enter image description here](https://istack.dev59.com/wnFxE.webp)
这是我使用的代码。
#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