<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script src="lib/jquery-2.1.4.min.js"></script> <title>ES5CMP</title> <style> .a{ width: 50px; height: 50px; background-color: #07beed; display: inline-block; } .b{ background-color: #00A000; } .c{ background-color: #00A000; } </style> </head> <body> <div class="wrap"> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> </div> </body> <script> $(".a").mouseover(function(){ $(this).siblings().addClass("b"); $(this).addClass("b"); $(this).nextAll().removeClass("b") }) $(".a").mouseleave(function(){ $(".a").removeClass("b") }) $(".a").click(function(){ $(this).siblings().addClass("c"); $(this).addClass("c"); $(this).nextAll().removeClass("c") }) </script> </html>
来源:http://www.cnblogs.com/carlyin/p/5809673.html