方法一: 用 mouseenter() 和 mouseleave() 实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test {width: 100px; height: 100px;} </style> </head> <body> <div id="test">123132</div> </body> </html> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $(‘#test‘).mouseenter(function() { $(this).css(‘background‘, ‘red‘); }); $(‘#test‘).mouseleave(function() { $(this).css(‘background‘, ‘#fff‘); }); }); </script>
方法二:用 hover() 实现（推荐使用）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test {width: 100px; height: 100px;} </style> </head> <body> <div id="test">123132</div> </body> </html> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 语法$(‘selector‘).hover(fn1, fn2); fn1鼠标经过时的处理 fn2鼠标离开时的处理 $(function() { $(‘#test‘).hover(function(){ $(this).css(‘background‘, ‘red‘); }, function() { $(this).css(‘background‘, ‘#fff‘); }); }); </script>
原文：https://www.cnblogs.com/li1234567980/p/11746872.html