问题:当光标移动到特定按钮时,所有按钮都突出显示。当光标移出特定按钮时,只有那个按钮不突出显示。
  预期:在背光按钮之间交替移动




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

* {
    margin: 0;
    padding: 0;
    transition: 0.1s; }

body {
    background-color: #efeded;
    font-family: 'Roboto Condensed', Helvetica, sans-serif;
    text-align: left;
    font-size: 18px;
    color: #303030; }

.container {
    max-width: 900px;
    margin: 0 auto; }

h3 {
    color: #C3FF00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em; }

h4 {
    text-transform: uppercase; }

.menu .nav-menu-prog ul li,
.menu .nav-menu-tech ul li {
    padding: 0.5em;
    background-color: #89f9dd;
    width: 100%;
    text-align: center;
    margin-right: 2px;  }

.menu .nav-menu-prog ul li,
.menu .nav-menu-tech ul li {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-top: 1em;  }
.main-list{
    max-width: 10em;  }

.campus-board{
    max-width:10em;}
.finger-board{
    max-width:10em;}
.peg-board{
    max-width:10em;}
.roller-pull{
    max-width:10em;}
.trx{
    max-width:10em;}

.roll-heal{
    max-width: 10em; }
.drop-knee{
    max-width: 10em;}
.jump-up{
    max-width: 10em;}
.tap-on-tip{
    max-width: 10em;}
.front-step{
    max-width: 10em;}
.back-step{
    max-width: 10em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="menu">
        <div class="nav-menu-prog">
        <ul>
           <li class="main-list">Programs</li>
           <li class="campus-board"><a id="campus-training" href="#cbt">Campus board training</a></li>
           <li class="finger-board"><a id="finger-training" href="#fbt">Finger board training</a></li>
           <li class="peg-board"><a id="peg-training" href="#pbt">Peg board training</a></li>
           <li class="roller-pull"><a id="roller-training">Roller pull-up training</a></li>
           <li class="trx"><a id="trx-training">TRX training</a></li>
        </ul>
    </div>





每个元素<li>标记必须使用JQuery .each()迭代器来防止重复代码。
我的目的是创建事件,当光标移动到按钮上时,鼠标单击时将响应该事件,此时按钮将突出显示。但是,当光标离开特定按钮或大多数按钮之一时,事件结束,并且按钮与其他按钮保持相同的颜色。

也许我会部分地了解代码中出现问题的地方。
当事件侦听器“ mouseenter”等待光标移至事件区域时,事件处理程序将无法正确执行任务。依次突出显示所有<li>元素。然后,鼠标从<li>元素移出,然后事件处理程序停止工作。但这不会发生,并且仍然可以解决。

最佳答案

正如A. Wolff所说:

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


片段:



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

.menu .nav-menu-prog ul {
  list-style: none;
}
.menu .nav-menu-prog ul li,
.menu .nav-menu-tech ul li {
    padding: 0.5em;
    background-color: #89f9dd;
    width: 100%;
    text-align: center;
    margin-right: 2px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="menu">
        <div class="nav-menu-prog">
        <ul>
           <li class="main-list">Programs</li>
           <li class="campus-board"><a id="campus-training" href="#cbt">Campus board training</a></li>
           <li class="finger-board"><a id="finger-training" href="#fbt">Finger board training</a></li>
           <li class="peg-board"><a id="peg-training" href="#pbt">Peg board training</a></li>
           <li class="roller-pull"><a id="roller-training">Roller pull-up training</a></li>
           <li class="trx"><a id="trx-training">TRX training</a></li>
        </ul>
    </div>

07-24 09:50
查看更多