javascript - 将鼠标悬停在其他导航栏元素上时禁用焦点

Question

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

因此，这里的产品是重点，而优势是悬停的。我希望当我将鼠标悬停在 preise 上时，产品会失去焦点。但是，如果我不选择 preise，焦点将“返回”到产品。代码如下

.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');
    });
    }

但没有成功。

Answer 1

在这里，当您指的是焦点时，我想您正在谈论单击链接时的情况。因为焦点更适合输入字段等 html 元素。

请运行下面的代码片段以查看其实际效果。

$('.nav li').on('click', function() {
  var $link = $(this);
  if (!$link.hasClass('selected')) {
    $link.addClass('selected');
    $link.siblings().removeClass('selected');
    $link.siblings().removeClass('dimmed');
  }
});

$('.nav li').hover(
  // hover in handler
  function() {
    $(this).siblings('.selected').each(function() {
     if (!$(this).hasClass('dimmed')) {
      $(this).addClass('dimmed');
     }
    });
  },
  // hover out handler
  function() {
    $(this).siblings('.selected').each(function() {
     $(this).removeClass('dimmed');
    });
  });

.nav {
  display: flex;
}

.nav li {
  position: relative;
  list-style: none;
  padding: 5px 10px;
  text-transform: uppercase;
  cursor: pointer;
}

li.selected.dimmed:before,
li: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;
}

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

li.selected: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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <li>produkt</li>
  <li>preise</li>
</div>