<title>鼠标悬停图片放大</title>

来源：互联网发布：刚开网店卖软件好不好编辑：程序博客网时间：2024/05/17 09:24
<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停图片放大</title><style type="text/css">         /*****鼠标悬停图片变大文字消失*****/            .style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}            .style1 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}            .style1 ul li img{width: 170px;height: 120px;border-radius: 2px;}            .style1 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}            .style1 ul li:hover {-webkit-transform: scale(1.1); /*1.1放大值*/                                  -moz-transform: scale(1.1);                                   -o-transform: scale(1.1);                                  -ms-transform: scale(1.1);                                    /*  本hover用的是：transform属性；scale是属性下放大；*/                                   }            .style1 ul li:hover span{ opacity:0}            /*****鼠标悬停文字消失*****/</style></head><body><div class="style1">    <h2>鼠标悬停整体放大</h2>    <ul>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    <li><img src="http://img1.gtimg.com/datalib_img/17-10-27/6/98410af9bb0b099e0464e278a00bcc214.jpg"></li>    </ul></div></body></html>
阅读全文
0 0