Mouse Containerın Üstünde Olmadığı Zamanlarda fadeOut
Butona basınca containerımın display i block oluyor. Mouse um containerımın üstünde olmadığı zamanlarda containerın 2 saniye sonra display inin none olmasını istiyorum. Ama eğer mouse um containerın üstündeyse containerın sonsuza kadar açık kalmasını istiyorum.
Umarım anlatabilmişimdir. Nasıl yapabileceğim hakkında fikri olan var mı?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
kodu kesinlikle optimize edebilirsin ama konsept olarak bu kod işine yarayacaktır
<button id="show"> show </button>
<div id="container"></div>
const btn = document.getElementById("show");
const container = document.getElementById("container");
let isHide = true;
let isOver = false;
var startAutoHideContainer = () => {
isHide = false;
let counter = 0;
var interval = setInterval(() => {
if (!isOver) {
counter++;
} else {
counter = 0;
}
if (counter == 2) {
container.style.display = "none";
clearInterval(interval);
isHide = true;
}
}, 1000);
}
btn.addEventListener("click", () => {
if (isHide) {
isHide = true;
container.style.display = "block";
startAutoHideContainer()
}
})
container.addEventListener("mouseover", () => isOver = true);
container.addEventListener("mouseout", () => isOver = false);
edit: kodları paylaşırken herhangi bir css kodu paylaşmadım pek tabi mouseover
ve mouseout
eventlerinin çalışabilmesi için container'ın yükseklik ve genişliğe ihtiyacı olacaktır.