- A+
所属分类：Web前端
代码实现：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000; } .wrap { margin: 100px auto 0; width: 630px; height: 394px; padding: 10px 0 0 10px; background: #000; overflow: hidden; border: 1px solid #fff; } .wrap li { float: left; margin: 0 10px 10px 0; } .wrap img { display: block; border: 0; } </style> <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js"></script> <script> $(function() { //鼠标进入的时候,其他的li标签透明度：0.3 $(".wrap li").hover(function() { $(this).siblings().stop().fadeTo(200, 0.3); }, function() { // 鼠标离开，其他li 透明度改为 1 $(this).siblings().stop().fadeTo(200, 1); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07bsG4.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07briF.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07bBIU.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07b0aT.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07baq0.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> <li> <a href="#"><img src="https://s1.ax1x.com/2020/10/16/07bwZV.jpg" alt="jQuery 高亮显示" alt="" /></a> </li> </ul> </div> </body> </html> 
