More actions
No edit summary |
No edit summary |
||
Line 13: | Line 13: | ||
clearTimeout(hoverTimer); // Prevent the flip if the mouse leaves before the delay | clearTimeout(hoverTimer); // Prevent the flip if the mouse leaves before the delay | ||
panel.classList.remove('hovered'); | panel.classList.remove('hovered'); | ||
}); | |||
}); | |||
document.addEventListener('DOMContentLoaded', function() { | |||
const panels = document.querySelectorAll('.panel'); | |||
panels.forEach(function(panel) { | |||
// Add class when mouse enters | |||
panel.addEventListener('mouseenter', function() { | |||
panel.classList.add('hovered'); | |||
}); | |||
// Remove class when mouse leaves | |||
panel.addEventListener('mouseleave', function() { | |||
panel.classList.remove('hovered'); | |||
}); | |||
}); | }); | ||
}); | }); |
Revision as of 18:17, 22 December 2024
/* Any JavaScript here will be loaded for all users on every page load. */
document.addEventListener('DOMContentLoaded', function() {
const panel = document.querySelector('.panel');
let hoverTimer;
panel.addEventListener('mouseenter', function() {
hoverTimer = setTimeout(function() {
panel.classList.add('hovered');
}, 200); // Delay the flip by 200ms (you can adjust the value)
});
panel.addEventListener('mouseleave', function() {
clearTimeout(hoverTimer); // Prevent the flip if the mouse leaves before the delay
panel.classList.remove('hovered');
});
});
document.addEventListener('DOMContentLoaded', function() {
const panels = document.querySelectorAll('.panel');
panels.forEach(function(panel) {
// Add class when mouse enters
panel.addEventListener('mouseenter', function() {
panel.classList.add('hovered');
});
// Remove class when mouse leaves
panel.addEventListener('mouseleave', function() {
panel.classList.remove('hovered');
});
});
});