v2.5.2
Giriş yap

Mouse Containerın Üstünde Olmadığı Zamanlarda fadeOut

damnman
431 defa görüntülendi

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ı?

Cevap yaz
Cevaplar (3)
bbera
1215 gün önce

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.

damnman
1215 gün önce

pek benzer değil gibi :D

sefa
1215 gün önce

Burada benzer bir örnek var. Güzel açıklamış.