代码实现
<!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; 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="jquery.min.js"></script> </head> <body> <div class="wrap"> <ul> <li> <a href="#"><img src="images/01.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/02.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/03.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/04.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/05.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/06.jpg" alt="" /></a> </li> </ul> </div> <script> //1.1 鼠标经过：其它兄弟li的透明度设置为50% // $(".wrap li").mouseover(function () { // $(this).siblings().stop().fadeTo(400,0.5); // }); //1.2 鼠标离开 其它兄弟li的透明度恢复 // $(".wrap li").mouseout(function () { // $(this).siblings().stop().fadeTo(400,1); // }); //2 复合写法 $(".wrap li").hover(function () { $(this).siblings().stop().fadeTo(400,0.5); },function () { $(this).siblings().stop().fadeTo(400,1); }); </script> </body> </html>
用到的图片
