'How to check if an event is still happening witih the same event after it already fired?
I am trying to do a card in witch the text dissapears after you've been hovering it for 2 seconds. I call a timeout whenever mouseover happens but the fault with this approach is that if a user even slighly hovers a card than it will trigger the timer witch is not how it's supposed to work The code snippet isnt actually showing something but that's because I'm not sure there is need tu upload the images. Your help will be much appreciated!
const categories = document.querySelectorAll(".categories-item");
categories.forEach(item => {
item.addEventListener('mouseover', () => {
const textBox = item.querySelector(".category-text-box");
setTimeout(() => {
textBox.classList.add('categories-item-hover')
console.log('event done');
}, 2000);
item.addEventListener(('mouseout'), () => {
const textBox = item.querySelector(".category-text-box");
if (textBox.classList.contains('categories-item-hover')) {
textBox.classList.remove('categories-item-hover');
}
})
clearTimeout();
})
})
.section-categories {
background-color: #f1f3f5;
}
.categories-item {
overflow: hidden;
position: relative;
}
.category-img-box {
display: flex;
justify-content: center;
}
.category-img {
width: 100%;
}
.category-text-box {
transition: all 0.4s;
width: 100%;
position: absolute;
padding: 6.4rem 4.8rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: translateY(-100%);
background-color: #fff;
}
.categories-item-hover {
transform: translateY(0);
}
.category-heading {
display: inline;
font-size: 2.8rem;
font-weight: 600;
}
<section class="section-categories">
<div class="container">
<div class="categories-container grid grid--3-cols">
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" class="category-img" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
<div class="categories-item">
<div class="category-img-box">
<img src="/IMG/bed.png" alt="Bed" class="category-img">
</div>
<div class="category-text-box">
<h3 class="category-heading">Paturi</h3>
</div>
</div>
</div>
</div>
</section>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
