0

Нужно отследить, что элемент не в фокусе больше секунды.

Сейчас отслеживаю, что на с самого элемента курсор выведен.

$('i.hint-btn').mouseover(function(){
    $('.hint').fadeIn('slow');
    $('.hint').mouseleave(function(){
        $(this).fadeOut('slow');
    });
});

Элемент должен оставаться видимым (hint) если он находится в фокусе. Если курсор находится вне hint больше секунды hint скрывается

3 ответа 3

1

Нужно отследить, что элемент не в фокусе больше секунды.

$(document).ready(function() {
  var t = 0; // timeOut value
  $('.hint-btn').hover(

    function() {// IN hint-btn
      $('.hint').fadeIn('slow')
    },
    function() {// OUT hint-btn
      if (!$('.hint').is(':hover') && !$('.hint').is(':focus'))
        $('.hint').fadeOut('slow')
    }
  )
  $('.hint').hover(
    function() {// IN hint
      clearTimeout(t);
    },
    function() {// OUT hint
      var t = setTimeout(() => {
        $('.hint-btn').trigger('mouseout')
      }, 1000)
    }
  )
});
.hint {
  width: 200px;
  display: none;
  border: 1px solid #eee;
  padding: .3125em
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <i class="hint-btn btn btn-primary">Button</i>
  <div class="hint">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate dicta laborum odio sit expedita ad enim illum ex, nesciunt tempore. Tempora eligendi similique hic deleniti fugit doloribus assumenda inventore provident!
  </div>
</div>

6
  • У вас не совсем так, если я наведу мышкой, подожду .5s, уберу мышку, потом снова наведу и снова уберу в пределах одной секунды, то у меня подсказка скроется быстрее, чем через секунду
    – ThisMan
    5 июл 2018 в 13:10
  • Получается, что элемент скрывается при наведении. А нужно, чтобы элемент скрывался если курсор находится на любом элементе кроме .hint более секунды .hint скрывается 5 июл 2018 в 13:15
  • @Дмитрий скрывается, при выходе из фокуса и ховера. Если вы это имели ввиду "под наведение", то да. Показывается при навидении.
    – Kosta B.
    5 июл 2018 в 13:19
  • Элемент должен оставаться видимым (hint) если он находится в фокусе. Если курсор находится вне hint больше секунды hint скрывается 5 июл 2018 в 13:22
  • Я навожу на Hint и он исчезает, он должен исчезнуть, если курсор уйдет с него 5 июл 2018 в 13:49
0

Попробуйте как то так

var el = $('.i.hint-btn');
if (!el.is(":focus")){
  setTimeout(function() {$('.hint').fadeOut('slow');}, 1000);
}
3
  • Получается, что элемент просто скрывается через секунду 5 июл 2018 в 12:48
  • А что нужно, чтобы он делал? 5 июл 2018 в 12:58
  • После появления подсказки, если она не в фокусе более секунды. она скрывается, если элемент в фокусе подсказка остается видимой 5 июл 2018 в 13:02
0

$(document).ready(function() {
  let hintTimeout = null; // наш таймер
  const hoverOut = () => {
    hintTimeout = setTimeout(() => {
      // не нужны ни какие проверки
      // если мы опять наведем мышку на элемент
      // то таймер просто очистится
      $('.hint').fadeOut('slow');
    }, 1000)
  }
  const hoverIn = () => {
    $('.hint').fadeIn('slow');
    clearTimeout(hintTimeout);
  }

  $('i.hint-btn').hover(() => {
    hoverIn();
    hoverOut();
  }, () => {});

  $('.hint').hover(hoverIn, hoverOut);
});
.hint {
  display: none;
  background: #333;
  color: #fff;
  padding: 2px;
  width: 60px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="hint-btn">Button</i>
<div class="hint">Hint</div>

У Jquery есть метод hover, которые принимает два параметра: функцию при ховере, функции при блюре

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.