html 文件:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <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: 446px; 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://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- //mouseover: 鼠标经过事件
- //mouseout: 鼠标离开事件
- //mouseenter: 鼠标进入事件
- //mouseleave: 鼠标离开事件
- $(".wrap>ul>li").mouseenter(function() {
- $(this).CSS("opacity", "1").siblings().CSS("opacity", "0.4");
- });
- $(".wrap").mouseleave(function() {
- // 让所有的 li 都变亮
- //$("li");
- //$(".wrap li");
- //$(".wrap>ul>li")
- //$(this).children().children("li");
- $(this).find('li').CSS("opacity", 1);
- })
- })
- </script>
- </head>
- <body>
- <div class="wrap">
- <ul>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="https://images.cnblogs.com/cnblogs_com/luwn/1701485/t_200415035849d3a83afb3f3b8c1bb4ac77a2e61a5eae.jpg">
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3508267.html