聚光灯效果

 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>