一、鼠标经过图标变换
<script src="images/jquery.1.9.1.js"></script>
<style type="text/css">.xxgk_list li { display: inline-block;float: left;position: relative;margin-top: 7px;}.xxgk_list li a { display: inline-block;width: 173px;height: 58px;text-align: center;color: #fff;font-size: 16px;}.xxgk_list li p { position: absolute;z-index: 1;background-image: url(images/2017hd_zdlyxxgk_list_bg.png);background-repeat: no-repeat;width: 173px;height: 58px;left: 0;}.xxgk_list_1 a p { background-position: 0px 0px;}.xxgk_list_2 a p { background-position: -181px 0px;}.xxgk_list_3 a p { background-position: 0px -68px;}.xxgk_list_4 a p { background-position: -181px -68px;}.xxgk_list_5 a p { background-position: 0px -136px;}.xxgk_list_6 a p { background-position: -181px -136px;}</style></head><body><div class="xxgk_list"><div class="xxgk_list"><ul id="xxgkList"><li class="xxgk_list_1"><a href="" target="_blank"><p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px; overflow: hidden;"></p></a></li><li class="xxgk_list_2 mrLeft"><a href="" target="_blank"><p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; overflow: hidden; border-radius: 0px;"></p></a></li><li class="xxgk_list_3 "><a href="" target="_blank"><p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p></a></li><li class="xxgk_list_4 mrLeft"><a href="./xxgk/wgkzl/" target="_blank"><p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p></a></li><li class="xxgk_list_5 "><a href="./grfw/" target="_blank"><p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px; overflow: hidden;"></p></a></li><li class="xxgk_list_6 mrLeft"><a href="http://wsbs.gz.gov.cn/gz/hotline/gotoIndex.action" target="_blank"><p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p></a></li></ul></div></div></body><script type="text/javascript">
//首页图标效果$('#xxgkList li a').hover(function(){ $(this).find('p').stop(true).animate({width:'170px',height:'55px',top:'5',left:'5',opacity:0.5}, 200).animate({width:'170px',height:'55px',top:'0',left:'0','border-radius':'0px',opacity:1}, 300);},function(){ $(this).find('p').stop(true).animate({width:'173px',height:'58px',top:'0',left:'0','border-radius':'0',opacity:1}, 500); })</script></html>
二、鼠标经过图标旋转
<!--效果二：鼠标经过时图标旋转-->
<div class="section00CenterLeft_list"><ul><li class="section00CenterLeft_list1"><a href="" target="_blank"><em class="icon"></em><span>权责清单</span></a></li><li class="section00CenterLeft_list2" style="margin-left:21px;"><a href="" target="_blank"><em class="icon"></em><span style="right:10px">信用信息双公示</span></a></li><li class="section00CenterLeft_list3" style="margin-left:21px;"><a href="" target="_blank"><em class="icon"></em><span>电子地图</span></a></li><li class="section00CenterLeft_list4" style="margin-left:21px;"><a href="" target="_blank"><em class="icon"></em><span style="right:15px">人才招聘信息</span></a></li></ul></div>
css样式：
/*例子二：鼠标经过图标旋转*/
.section00CenterLeft_list { display: inline-block;margin-top: 21px;}.section00CenterLeft_list li { display: inline-block;float: left;width: 182px;height: 67px;position: relative;}.section00CenterLeft_list li a { display: inline-block;width: 100%;height: 100%;line-height: 67px;}.section00CenterLeft_list li a:hover { }.section00CenterLeft_list li a span { position: absolute;right: 30px;color: #135ca9;font-size: 16px;font-weight: bold;}.section00CenterLeft_list li a .icon { display: inline-block;float: left;width: 80px;height: 67px;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}.section00CenterLeft_list li a:hover .icon { -webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg);-o-transform: rotateY(360deg);transform: rotateY(360deg);}.section00CenterLeft_list1 a .icon { background: url(images/section00CenterLeft_list1.png) 35px center no-repeat;}.section00CenterLeft_list2 a .icon { background: url(images/section00CenterLeft_list2.png) 15px center no-repeat;}.section00CenterLeft_list3 a .icon { background: url(images/section00CenterLeft_list3.png) 35px center no-repeat;}.section00CenterLeft_list4 a .icon { background: url(images/section00CenterLeft_list4.png) 20px center no-repeat;}