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, которые принимает два параметра: функцию при ховере, функции при блюре

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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