独角兽企业重金招聘Python工程师标准>>>
纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图)
css.big_box{margin:0;overflow:hidden;position:relative;}.big_boxa{position:relative;display:block;width:600px;height:300px;}.big_boxa.xian_di{z-index:1;margin:0;width:600px;height:300px;overflow:hidden;}.big_boxa.xian_di>img{width:100%;height:100%;}.big_boxa.xian_di.yin_xian{text-align:center;opacity:0;z-index:10;visibility:visible;filter:alpha(opacity=0);line-height:100%;-webkit-transition:all0.5sease;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;padding-top:30px;width:600px;height:300px;overflow:hidden;}.big_boxa:hover.xian_di.yin_xian{opacity:1;filter:alpha(opacity=100);visibility:visible;-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);}.hide{display:none;}.on{border:2pxsolidblueviolet;margin:-5px;padding:3px;}
html<divclass="big_box"><ahref="#"><divclass="xian_di"><imgsrc="images/111.jpg"><divclass="yin_xian"><imgsrc="images/gz_erweima.png"></div></div></a></div>
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评