hover خاصية

بالنسبة لل hover يمكنك عمله بالطريقة التالية:

تخيل معي أنك تملك عنصر A وعنصر B

<div id="itemA">Item A</div>
<div id="itemB">Item B</div>

يمكنك إضافة CSS بالشكل التالي، بحيث إذا تم عمل hover على العنصر A سيتغير style العنصر B:

#itemA:hover + #itemB {
    background: red
}

اما بالنسبة لل click فعليك إضافة أكواد بالجافا سكربت لتغير استيل عنصر A عند الضغط على العنصر B.

بالنسبة للكود الخاص بك، أقترح عليك جمع عناصر h4 مع الأيقونات i كالتالي:

<div class="items-nav">
    <div class="active">
      <i class="fas fa-home fa-lg"></i>
      <h4 class="active">home</h4>
    </div>
    <div>
      <i class="fas fa-user fa-lg"></i>
      <h4>about</h4>
    </div>
    <div>
      <i class="fas fa-cogs fa-lg"></i>
      <h4>resume</h4>
    </div>
    <div>
      <i class="fas fa-home fa-lg active"></i>
      <h4>service</h4>
    </div>
    <div>
      <i class="fas fa-clipboard fa-lg"></i>
      <h4>portofilo</h4>
    </div>
    <div>
      <i class="far fa-address-card fa-lg"></i>
      <h4>blog</h4>
    </div>
    <div>
      <i class="fab fa-blogger-b fa-lg"></i>
      <h4>contact</h4>
    </div>
</div>

هكذا سيسهل عليك التعامل مع العناصر، كأنها عنصر واحد.