Dropmenu 'ye hover yada click olunca body dark olması.

zhen 1845 gün önce

720 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

ilyasbilgihan

1845 gün önce

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

#002455

zhen

1841 gün önce

İstediğim sonuca ulaştım teşekkür ederim. Sağolun.

#002507

ilyasbilgihan

1844 gün önce

Parent ına opacity uygulanan bir elemanı o opacity den mahrum bırakamıyoruz maalesef. Child eleman maksimum opacity: 1 alacağından en fazla kapsayıcısının gösterebildiğini gösterebilir.

Alternatif çözüm yolları denemelisin. Örneğin yukarıda attığım gibi bir overlay oluşturup bu overlayi senin de dediğin gibi z-index ve position yardımıyla tüm nesnelerin üzerine getir. Ovarlay in de üzerinde olmasını istediğin elemana da overlayden daha yüksek bir z-index değeri ver. Arka planda oluşmasını istedğin efekti ovarlay e uygularsan istediğine yakın bir sonuç elde edebilirsin. Örneğin siyahın .1 i kadar karartabilir veya biraz blur ekleyebilirsin.

Ama diyorsan ki ben sadece opacity düşürmek istiyorum, o halde dropmenu yu opacity uyguladığın parentten çıkarmalısın ki bu durumda body den çıkaramazsın. O halde body nin içerisindeki elemanları bir div içerisine topla drop menuyu de divin dışarısına çıkar ve opacity i elemanları topladığın div e uygula fakat böyle de drop menüyü konumlandırmada sıkıntı yaşayabilirsin.

<body>
    <div class="arkadaKalacak">
        <!-- Tüm sayfa içeriği -->
    </div>
    <div id="dropmenu2">Menu</div>
</body>

#002467

zhen

1844 gün önce

// Jquery

$("#dropmenu2").on("mouseenter", function(){
        $("body").css("opacity", "0.3");
        $("body").css("z-index", "999");
        $('#dropmenu2').css("z-index", "9999")
        });
        
$("#dropmenu2").on("mouseleave", function(){
        $("body").css("opacity", "1");
        });

Bu şekilde istediğim sonuca yaklaştım ama açılan menü body altında kalıyor yani oda opacityden etkileniyor. onu z indexle öne çıkarmaya çalıştım olmadı.

#002465

webdevyusuf

1845 gün önce

Öncelikle merhaba kullanımı şu şekilde dener misin.


// Javascript
document.querySelector("#menu").addEventListener("click", () => {
    document.querySelector("body").style.opacity = "0.3";
});

// Jquery
$("#menu").on("click", function(){
    $("body").css("opacity", "0.3");
});

İyi çalışmalar...

#002454