İSE YOKSA düzeni gibi bir düzen HTML'de nasıl kurulur?

[volkantash]

S.a. Ağ tasarımlarımızı yapar iken bir öğenin üstüne imleci getirince görünmez ettiğimiz öğeleri görünür ediyoruz. Aşağıdaki gibi.

.görünmez{ display:none; }
.üstünde.iken:hover .ise-esnek-ser{ display: flex; }

Bunu deveb.css'te bir özellik olarak sunmak istiyorum.

<div class="üstünde iken">
  <div>
    <span class="görünmez ise-esnek-ser"></span>
  </div>
</div>

Başka yapılar kurmamıza engel yok. Şimdilik bu yapıyı düşünüyorum.

[volkantash]

Selam @fatihhayri. İlginizi çekeceğini düşündüğüm için sizi andım.

[volkantash]

Şöyle bir çözüm geliştirdim.

<div class="üstünde">
    İmleci üstüne sürükle.
    <div class="ise esnek ser yoksa serme">
       Bu yazıyı alanın üstünde iken görebilirsiniz.
    </div>
</div>

<style>
[class*="üstünde"]:hover [class*="ise esnek ser"]{ 
    display: flex; 
}
[class*="yoksa serme"]{ 
    display:none; 
}
</style>

[hasanyalsiz]

Güzel yapılar geliyor. devamını bekliyoruz. iyi çalışmalar