Javascript 如何使光标移动到按钮上并依次高亮显示它们。使用Jquery方法，如.each和mouseenter

问题：当光标移动到特定按钮时，所有按钮都会高亮显示。当光标移出某个特定按钮时，只有该按钮未高亮显示。
预期：在每个背光按钮之间交替移动

$（文档）.ready（函数（）{
$（'li'）。在（'mouseenter'，函数（）{
$（'li'）。每个（函数（）{
$（this.css（'background-color'，'#ef1909'）；
}).on（'mouseleave'，函数（）{
$（this.css（'background-color'，'#89F9DD'）；
});
});
});
*{
保证金：0；
填充：0；
转换：0.1s；}
身体{
背景色：#EFED；
字体系列：“Roboto Condensed”，Helvetica，无衬线；
文本对齐：左对齐；
字号：18px；
颜色：#303030；}
.集装箱{
最大宽度：900px；
边距：0自动；}
h3{
颜色：#C3FF00；
字号：700；
文本转换：大写；
字母间距：0.1em；}
h4{
文本转换：大写；}
.菜单.导航菜单程序，
.菜单.导航菜单技术ul li{
填充：0.5em；
背景色：#89f9dd；
宽度：100%；
文本对齐：居中；
右边距：2px；}
.菜单.导航菜单程序，
.菜单.导航菜单技术ul li{
列表样式：无；
显示器：flex；
证明内容：周围的空间；
页边距顶部：1em；}
.主要清单{
最大宽度：10em；}
.校园董事会{
最大宽度：10em；}
.指板{
最大宽度：10em；}
.钉板{
最大宽度：10em；}
.滚筒拉力{
最大宽度：10em；}
.trx{
最大宽度：10em；}
.滚疗{
最大宽度：10em；}
.屈膝{
最大宽度：10em；}
.跳起来{
最大宽度：10em；}
.点击提示{
最大宽度：10em；}
.前台阶{
最大宽度：10em；}
.退一步{
最大宽度：10em；}


程序



滚筒拉升训练
trx培训

正如A.沃尔夫所说：

$('li').on('mouseenter', function () {
    $(this).css('background-color', '#ef1909');                      
}).on('mouseleave', function () {                         
    $(this).css('background-color', '#89F9DD');                    
});

片段：


$（文档）.ready（函数（）{
$（'li'）。在（'mouseenter'，函数（）{
$（this.css（'background-color'，'#ef1909'）；
}).on（'mouseleave'，函数（）{
$（this.css（'background-color'，'#89F9DD'）；
});
});
.menu.nav菜单程序{
列表样式：无；
}
.菜单.导航菜单程序，
.菜单.导航菜单技术ul li{
填充：0.5em；
背景色：#89f9dd；
宽度：100%；
文本对齐：居中；
右边距：2px；}


程序



滚筒拉升训练
trx培训

删除
每个
循环非常感谢您的回答，但我的意思是没有重复的代码。是的，谢谢。但是我必须用每个
元素来做。这意味着我需要更多的代码。例如：这段代码我应该重复13次，这很难。必须是一种简单的方法，可能是使用.each（）方法通过循环，也可能是使用зΓзззJSNo，您不需要使用每个循环。这将应用于文档中的每个
元素看看Answer中的代码片段你的意思是，如果我在特定情况下使用我的逻辑来处理所有
元素，即使我将来会创建这些元素？你能帮我理解在我的情况下如何使用一些循环（Jquery或JavaScript）吗？我真的不想重复代码很多次。非常感谢您的帮助……是的，这段jquery代码将应用于文档中的每个
元素。试试看。我建议您向希望高亮显示的li元素添加特定的类。示例：“$（'li.highlighted'）.on（'mouseenter'，function（）…”