1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>聚光灯效果</title> 6 <script src="../base/jquery-3.1.0.js"></script> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 ul { 15 } 16 17 ul:after { 18 content: ""; 19 display: block; 20 visibility: hidden; 21 height: 0; 22 width: 0; 23 clear: both; 24 } 25 26 li { 27 float: left; 28 } 29 30 .opacityBg { 31 opacity: 0.4; 32 } 33 </style> 34 </head> 35 <body> 36 <ul> 37 <li><img src="../images/1.jpg"></li> 38 <li><img src="../images/2.jpg"></li> 39 <li><img src="../images/3.jpg"></li> 40 <li><img src="../images/4.jpg"></li> 41 </ul> 42 </body> 43 <script> 44 $(function () { 45 46 $("ul li ").hover(function () { 47 $(this).siblings().addClass("opacityBg"); 48 }, function () { 49 $(this).siblings().removeClass("opacityBg"); 50 }); 51 52 }) 53 </script> 54 </html>