Как сделать чтобы блок не исчезал при повторном наведении на ссылку или блок?

Question

Есть ссылка, и div.

При наведении на ссылку, появляется блок через v-if, значение true. Блок находиться от ссылки на удалении, он не прилеплен к ней.

При снятии ховера с ссылки, значение false, блок скрывается через некоторое время через таймер (3 секунды).

Вопрос: Как сделать так, чтобы при последующих наведениях на ссылку ил Блок (В Момент, пока 3 секунды ещё не вышли), блок снова принимал значение TRUE? И тем самым отменял функцию скрытия блока. Ну и дальше снова по новой. как только курсор увели ссылки или с блока, опять идёт выполнение функции скрытии блока с таймером. И т.д.

    <div id="app">

<a href="#" @mouseenter="enter" @mouseleave="leave">При появлении на эту ссылку, должен появиться блок div</a>



<div class="BlockOver" @mouseenter="enter" v-if="BlockOver === true">
Этот блок появился при наведении на ссылку выше
</div>

</div>


    var app = new Vue({
  el: "#app",
  data: {
    BlockOver: 0,
  },
  methods: {
    enter: function() {
      this.BlockOver = true;
    },
    leave: function() {
      setTimeout(() => {
        this.BlockOver = false;
      }, 3000)
    }
  }
})

https://jsfiddle.net/r3ov8z4s/52/

Answer 1

Воспользуйтесь Отменой через clearTimeout. Вызов setTimeout возвращает «идентификатор таймера» timerId, который можно использовать для отмены дальнейшего выполнения.

// объявляем переменную, которая будет хранить id таймера
let timerId

var app = new Vue({
  el: "#app",
  data: {
    BlockOver: 0,
  },
  methods: {
    enter: function() {
      this.BlockOver = true
      // при наведении на ссылку или блок останавливаем таймер
      clearTimeout(timerId);
    },
    leave: function() {
      // присваиваем переменной id таймера 
      timerId = setTimeout(() => {
        this.BlockOver = false
      }, 1000)
    },
  }
})

.myClass {
  background-color: gray;
}

.BlockOver {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #ff0000;
  top: 20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <a href="#" @mouseenter="enter" @mouseleave="leave">При появлении на эту ссылку, должен появиться блок div</a>
  <div class="BlockOver" @mouseenter="enter" @mouseleave="leave" v-if="BlockOver === true">
    Этот блок появился при наведении на ссылку выше
  </div>

</div>

БЛОГ НА HUSL

Как сделать чтобы блок не исчезал при повторном наведении на ссылку или блок?

Ответы (1 шт):