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>