Seyfy adlı üyeden alıntı: mesajı görüntüle
Merhaba istediğin şekilde tam olarak css yapamazsın . en azından benim bilgim doğrultusunda 

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

<style>
	.gizlenen-class {display: none;}
	
	i.hover-verilecek-icon:hover + .gizlenen-class  {display: inline-block!important;}
</style>
Ama jquery ile çözebilirsin :

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

<style>.gizlenen-class {display: none;}</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script>
	$( ".hover-verilecek-icon" )
	.mouseenter(function() {
		$( ".gizlenen-class" ).css( "display","inline-block" );
	})
	.mouseleave(function() {
		$( ".gizlenen-class" ).hide();
	});
</script>
Öncelikle cevap için teşekkürler. Evet kod görevini yerine getiriyor ancak şöyle bir durum var."<style>.gizlenen-class {display: none;}</style>" şeklinde eklenen varsayılan display değerinin çalışması için "none!important" olması gerekiyor.(temada display: inline-block; değeri var ve üstte kalıyor) "none!important" yaptığımda ise jquery kodundaki "display","inline-block" alanını "display","inline-block!important" olarak değiştirmek gerekiyor. Bunu yaptığımda ise sanırım !important'ın eklenmesi jquery'de desteklenmediği için olsa gerek kod çalışmaz hale geliyor ya da farklı bir şekilde eklemek gerekir?