鼠标经过时,元素整体放大,代码如下:
.tc>div>ul>li { display: inline-block; vertical-align: top; width: 295px; height: auto; margin: 0 20px 18px 0; background: white; box-sizing: border-box; transition: all .5s; -webkit-transition: all .5s; /* Safari */ } .tc>div>ul>li:hover { cursor: pointer; transform: scale(1.1); -ms-transform:scale(1.1); /* IE 9 */ -moz-transform:scale(1.1); /* Firefox */ -webkit-transform:scale(1.1); /* Safari 和 Chrome */ -o-transform:scale(1.1); }
HTML 代码结构如下:
<div class="tc mld"> <h5><span>辅导班</span><small></small></h5> <div> <ul> <li onclick="window.open('video.html')"> <small></small> <a href="#">数量上课</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li> <li onclick="window.open('video.html')"> <small></small> <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li> <li onclick="window.open('video.html')"> <small></small> <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li> <li onclick="window.open('video.html')"> <small></small> <a href="#">辅导班</a><em>¥800.00</em><span>已售:<i>5</i>件</span></li> </ul> </div> <span><a href="#">更多课程>></a></span> </div>