Javascript 将鼠标悬停在其他导航栏项目上时禁用聚焦

我遇到了一个问题，我的导航栏项目在悬停时会出现下划线动画。单击后，动画将停留在那里。但是，如果我将鼠标悬停在相邻的导航栏项上，这两行将彼此相邻，看起来像一条长线

所以这里produkt是焦点，preise是悬停的。我希望，当我悬停在preise上时，产品不会被关注。但是，如果我没有选择preise，则focus“返回”到产品。代码如下

.undeline:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background: #52ae49;
    border-radius:3px;
    margin-top: -10px;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}


.undeline:hover:before {
    visibility: visible;
    display: block;
    transform: scaleX(1);
}

.undeline:focus:before  {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background: #52ae49;
    border-radius:3px;
    margin-top: -10px;
    visibility: visible;
    display: block;
    transform: scaleX(1);
}

我想，我将不得不使用JavaScript和.forEach来管理它。我试过这个

    function mouseOver() {
    $(".underline").each(function() {
    $(this).blur('focus');
    });
}

function mouseOut() {
    $("underline").each(function() {
    $(this).addClass('focus');
    });
    }

---

但是没有成功

这里你指的是焦点，我想你指的是点击链接时的焦点。As focus更适合输入字段等html元素

请运行下面的代码段以查看它的运行情况

$（'.nav li'）。在（'click'，function（）上{
var$link=$（此）；
if（！$link.hasClass（'selected'））{
$link.addClass（'selected'）；
$link.sides（）.removeClass（'selected'）；
$link.sides（）.removeClass（'dimmed'）；
}
});
$（'.nav li'）。悬停(
//悬停处理程序
函数（）{
$（this）.同级（'.selected'）。每个（函数（）{
if（！$（this）.hasClass（'dimmed'））{
$（this.addClass（'dimmed'）；
}
});
},
//悬停处理程序
函数（）{
$（this）.同级（'.selected'）。每个（函数（）{
$（this.removeClass（'dimmed'）；
});
});
.nav{
显示器：flex；
}
李国荣先生{
位置：相对位置；
列表样式：无；
填充物：5px10px；
文本转换：大写；
光标：指针；
}
li.已选择。暗显：之前，
李：以前{
内容：''；
位置：绝对位置；
宽度：100%；
高度：3倍；
底部：0；
左：0；
背景#52ae49；
边界半径：3px；
利润上限：-10px；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
李：悬停：之前{
能见度：可见；
显示：块；
变换：scaleX（1）；
}
李：选择：之前{
内容：''；
位置：绝对位置；
宽度：100%；
高度：3倍；
底部：0；
左：0；
背景#52ae49；
边界半径：3px；
利润上限：-10px；
能见度：可见；
显示：块；
变换：scaleX（1）；
}

产品
特权
请提供您的HTML和可验证的示例。您基本上救了我的命，我太棒了！如果我可以这样说的话，我发现了一种排除类的更简单方法：.navbar开始：hover.undeline:focus:before{transform:scaleX（0）；transition:all 0.3s ease in out 0s；.navbar开始：hover.undeline:hover:before{visibility:visible！重要；display:block；transform:scaleX（1）；}它也起作用了，但问题是，我无法在滚动或删除时添加.undeline类。因为它有这些很难选择的伪计算。所以您的解决方案解决了滚动问题。谢谢！我很高兴它对您有帮助：）