问题:当光标移动到特定按钮时,所有按钮都突出显示。当光标移出特定按钮时,只有那个按钮不突出显示。
预期:在背光按钮之间交替移动
$(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>