Скрыть блок, который появляется по наведению

Рейтинг: 0Ответов: 3Опубликовано: 18.04.2015

Всем доброго времени суток. Есть такой вот код при наведении на красный круг с вопросом всплывает подсказка.

$(".close_help").click(function() {
  $('.interact').removeClass("interact");
  setInterval(function() {
    $('.promo_code__q').addClass('interact')
  }, 500);
});
.promo_code {
  position: relative;
}
.promo_code__q {
  display: inline-block;
  width: 17px;
  height: 17px;
  font-size: 11px;
  line-height: 20px;
  margin: 0 0 0 2px;
  color: #fff;
  background: #ed1f24;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}
.promo_code__q:hover .promo_code_help {
  background: green;
}
.interact:hover .promo_code_help {
  display: block;
}
.promo_code_help {
  position: absolute;
  left: 33px;
  top: 30px;
  display: none;
}
.promo_code_help::after {
  content: '';
  position: absolute;
  left: 50px;
  top: -17px;
  border: 10px solid transparent;
  border-bottom: 10px solid #ED1F24;
}
.title_promo_code_help {
  background-color: #ED1F24;
  width: 193px;
  height: 49px;
  padding: 14px 50px 20px 20px;
  color: #fff;
  font-size: 14px;
}
.close_help {
  position: absolute;
  top: 4px;
  right: 10px;
  font-size: 20px;
}
<div class="promo_code">
  <span class="promo_code__label">Промо-код: 
      <span class="promo_code__q interact">?
      					<div class="promo_code_help">
        <div class="title_promo_code_help">
          <p>Введите промокод на скидку, который у вас есть.</p>
          <span class="close_help">&times;</span>
</div>
</div>
</span>

</span>
<input type="text" class="promo_code__field" id="coupon" name="COUPON" value="">
<button class="promo_code__btn">Применить</button>

</div>

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

Ответы

Ответов пока нет.