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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
理解了吧
有的是直接替换png图片，有的只是 icon 字体换个颜色而已。 用css：hover就可以实现
可以这样，先给一个白色有边框，当点击的时候把白色边框改成黄色。并且替换图片。
可以，下面是代码。
注：JQ要你自己引入jq的原始文件比如：<script src="js/jquery-1.11.1.min.js"></script>或是更高版本；
你是要这样的效果吗？？？