84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
uc导航http://www.uc123.com/的右侧的菜单当鼠标移动到购物和点击后会变成黄色,是用一张图片进行移动的,但是怎么实现呢?
小伙看你根骨奇佳,潜力无限,来学PHP伐。
.elevator-img-wrapper { width: 34px; height: 34px; margin: 0 auto; margin-top: 8px; overflow: hidden;/*超出部分会被隐藏,所以默认橙黄色部分是被隐藏的*/ } .elevator-category:hover .elevator-img-wrapper img { margin-left: -34px;/*强行让图左移一块,露出橙色部分*/ }
理解了吧
有的是直接替换png图片,有的只是 icon 字体换个颜色而已。 用css:hover就可以实现
可以这样,先给一个白色有边框,当点击的时候把白色边框改成黄色。并且替换图片。
可以,下面是代码。注:JQ要你自己引入jq的原始文件比如:<script src="js/jquery-1.11.1.min.js"></script>或是更高版本;
你是要这样的效果吗???
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.11.1.min.js"></script> <style> * { margin: 0; padding: 0; } li { list-style: none; } #gps_left { position: absolute; width: 200px; height: 40px; } #gps_left li { float: left; background: #ccc; margin: 5px; width: 40px; height: 40px; font: 12px/20px '微软雅黑'; } #box { width: 200px; height 300px; overflow: hidden; position: relative; left: 240px; top: 0; } #gps_right { position: relative; left: 0; top: 0; width: 1600px; height: 300px; } #gps_right li { float: left; width: 200px; height: 300px; font: 12px/210px '微软雅黑'; background: #f0f; } </style> </head> <body> <ul id="gps_left"> <li style="background:#ff0">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <p id="box"> <ul id="gps_right"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </p> </body> <script> $("#gps_left li").hover(function () { var $indes = ($(this).index()) //获取下标 var l = -($indes*200)+"px"; $("#gps_left li").css("background","#ccc").eq($indes).css("background","#ff0"); $("#gps_right").animate({ left: l, },200).end(); }); </script> </html>
理解了吧
有的是直接替换png图片,有的只是 icon 字体换个颜色而已。 用css:hover就可以实现
可以这样,先给一个白色有边框,当点击的时候把白色边框改成黄色。并且替换图片。
可以,下面是代码。
注:JQ要你自己引入jq的原始文件比如:<script src="js/jquery-1.11.1.min.js"></script>或是更高版本;
你是要这样的效果吗???