Herkese selam,

Sitedeki sayfa görüntülenmesini display: none ile gizledim ancak sayfada bir icona :hover verip bu alanın display: inline-block!important alarak görünmesini sağlamak istiyorum.

CSS'de hiyerarşik bir yapı olduğu için gizlenen alanın sadece üstüne :hover verdiğimde bu konun çalışmasını sağlayabiliyorum. Ancak farklı bir kullanım ile üstü olmayan bir class'da bulunan icon'a :hover tanımlanabilir mi? Merak ediyorum.

Örnek bir şablon oluşturmak gerekir ise;
HTML:

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon"></i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class"></div>
	</div>
</div>

CSS:

.gizlenen-class {display: none;}
i.hover-verilecek-icon:hover .gizlenen-class  {display: inline-block!important;}

Amaç: İcon'un üzerine gelindiğinde gizlenen alanın görünmesi.

Cevaplar için şimdiden teşekkürler.