<!DOCTYPE html> <html> <head> <title></title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .wrapper li{ list-style-type: none; width: 100px; height: 20px; border: 1px solid #ccc; text-align: center; } /*需要切换的hover类*/ .hover{ background-color: blue; color: white; font-weight: bold; } </style> </head> <body> <ul class="wrapper"> <li>1111111</li> <li>2222222</li> <li>3333333</li> <li>4444444</li> <li>5555555</li> <li>6666666</li> <li>7777777</li> </ul> <script type="text/javascript"> // 鼠标点击事件 换色 $('.wrapper').on('click', 'li', function(event) { // 当前的li添加hover类其兄弟元素移出hover类 $(this).addClass('hover').siblings().removeClass('hover') }); </script> </body> </html>