jQuery實現排他性和mouseenter（）方法—京劇小人聚光燈
阿新 • • 發佈：2018-12-09
要點：
1.通過jQuery中篩選選擇器中的.siblings()選擇器，可以輕鬆獲取到非焦點同級標籤，注意篩選選擇器都是方法，有些可以傳遞引數，一般是指定獲取標籤元素的型別。
2..mouseenter()和mouseleave()方法和onmouseover()和onmouseout()的區別，前一種需要滑鼠經過（或離開）對應的元素才能觸發事件處理函式，而後面一種只要進過本身或父級元素就能觸發，相當於事件冒泡。
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</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> </head> <body> <div class="wrap"> <ul> <li><a href="#"><img src="images2/01.jpg"></a></li> <li><a href="#"><img src="images2/02.jpg"></a></li> <li><a href="#"><img src="images2/03.jpg"></a></li> <li><a href="#"><img src="images2/04.jpg"></a></li> <li><a href="#"><img src="images2/05.jpg"></a></li> <li><a href="#"><img src="images2/06.jpg"></a></li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // jQuery的入口函式 $(".wrap li").mouseenter(function(){ // .mouseenter()方法和onmouseover的區別是注意 $(this).css("opacity","1").siblings("li").css("opacity","0.5"); // .siblings()是篩選選擇器，同時也可以新增引數，找到除了自己的其他全部元素 }) $(".wrap").mouseleave(function(){ $(this).find('li').css("opacity",1); // find()篩選選擇器，選擇呼叫元素的後代，括號內是後代標籤的名字 }) }) </script> </body> </html>
效果;
