Скрыть блок, который появляется по наведению
Всем доброго времени суток. Есть такой вот код при наведении на красный круг с вопросом всплывает подсказка.
$(".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">×</span>
</div>
</div>
</span>
</span>
<input type="text" class="promo_code__field" id="coupon" name="COUPON" value="">
<button class="promo_code__btn">Применить</button>
</div>
Как по нажатию на крестик в подсказке, скрыть ее, но так что бы при повторном наведении на круг она появлялась снова?
Источник: Stack Overflow на русском