Отключить фокус при наведении на другие элементы панели навигации - PullRequest
Новая
       11

Отключить фокус при наведении на другие элементы панели навигации

0 голосов
/ 24 апреля 2020

У меня проблема с тем, что мои элементы Навбара при наведении курсора на анимацию подчеркивания. После нажатия анимация остается там. Однако, если я наведу курсор мыши на соседний элемент панели навигации, две строки появятся рядом друг с другом в виде одной длинной строки. enter image description here

Таким образом, здесь продукт сосредоточен, и положение перемещено. Я sh, что, когда я нахожусь над точным, продукт становится не сфокусированным. Тем не менее, если я не выбрал 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');
    });
    }

Но безуспешно.

1 Ответ

1 голос
/ 25 апреля 2020

Здесь, когда вы имеете в виду фокус, я предполагаю, что вы говорите, когда нажимаете на ссылку. Поскольку фокус больше подходит для 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>
...