<!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>jQuery用on()代理的方法实现鼠标点击事件，当前的背景色变化其他的背景色不变
原文地址：https://www.cnblogs.com/myunYao/p/8820275.html