Dropmenu 'ye hover yada click olunca body dark olması.
Merhabalar.. Başlıkta da belirttiğim gibi bu işlemi yapamadım. Dropmenü açıldığında menünün ön plana çıkması ve diğer görüntülerin opacity .7 olarak kararmasını istiyorum.
Jquery'nin 'hover'ı ile yapmaya çalıştım bu sefer açılan menüde arkada kaldı. z-index ile çözmeye çalıştım olmadı.
**** Tayfun hocamın css transform derslerinde anlattığı popup mantığı ile yola çıkarak bir şeyler yapmaya çalıştım ama olmadı. Tam istediğim görüntü aslında şu. oyunfor.com sitesindeki sağ üst tarafta olan sepete hover olunca sepeti gösterip diğer elementleri karartması.
<main class="main">
/* Content */
<a class="hover-btn">Hover</a>
<div class="overlay"></div>
</main>
.main { position: relative; height: 100%; }
.hover-btn { position: relative; z-index: 999; }
.overlay {
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(2px); // Performans düşüklüğüne sebep olabilir
transition: .3s opacity, .3s visibility;
background: rgba(0,0,0,.05);
top: 0;
left: 0;
z-index: 99;
opacity: 0;
visibility: hidden;
}
.hover-btn:hover + .overlay { opacity: 1; visibility: visible; }
Yukarıda main classına position: relative verildiğinden overlay main ile sınırlandırılmış. Eğer tüm sayfa bulanıklaştırılmak isteniyorsa maindeki position: relative kaldırılmalı.