Hover Over Text, Change Entire Page's Theme (Seemingly)

Site URL: https://andrewhunt.design/work

Howdy Squarespace wizards,

I'm a student brand designer putting together my personal portfolio with Squarespace. As a designer, I have specific ideas in mind for my website. I am an extremely novice web developer, so all of the specific ideas I've realized so far are through a Frankenstein of CSS from different forum posts and amateur, crude programming. This has worked fine until now.

On my homepage, I have a code block containing a list of headers hyperlinked to different pages (I used a code block instead of a portfolio page because I want to get even more specific than what a portfolio page allows me to do.):

On hover, I've made it so the individual header elements become white and the entire page's background changes:

Next, I want to change the color of all other text on the page, especially in the nav, dependent on hovering over each individual header, and I also want the site logo to change color when hovering over each individual header. As you can see in the image above, the nav links become illegible against the dark background. This is why I want to change nav colors. I'm thinking that the nav must be a descendant of the headers, but I'm not sure how to do that. 

Below is the code copy/pasted directly from my site. I apologize for it's sloppiness; again, I hardly know what I'm doing.

<style>
  
  #white.white:hover{
  
    color: white!important;
  transition:0s;
    
  }
  
  .background {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition:.25s all;
  opacity:0;
    
}
  
  div.link>a {
  display: block;
  position: relative;
  z-index: 100;
}

.bg1+.background {
  background: url(https://static1.squarespace.com/static/60121d053bbcf31d4b801dfb/t/60b8428d6330491e63f7a05e/1622688399489/HOME-HAVENTYPE.jpg);
}
.bg1:hover +.background {
  opacity:1;
}

.bg2+.background {
  background: url(https://static1.squarespace.com/static/60121d053bbcf31d4b801dfb/t/60b842880196f374ad78fb71/1622688392207/HOME-ARMCHAIR_THOUGHT.jpg);
}
.bg2:hover +.background {
  opacity:1;
}

  .bg3+.background {
  background: url(https://static1.squarespace.com/static/60121d053bbcf31d4b801dfb/t/60b8429e7374857839544b73/1622688414298/HOME-RFL.jpg);
}
.bg3:hover +.background {
  opacity:1;
}

.bg4+.background {
  background: url(https://static1.squarespace.com/static/60121d053bbcf31d4b801dfb/t/60b842993618585c28ee7d85/1622688409888/HOME-JUNK_DRAWER.jpg);
}
.bg4:hover +.background {
  opacity:1;
}
  
  .bg5+.background {
  background: url(https://static1.squarespace.com/static/60121d053bbcf31d4b801dfb/t/60b84295c5a380306697f156/1622688405268/HOME-ILLUSTRATION.jpg);
}
.bg5:hover +.background {
  opacity:1;
}
  
</style>

<div class=container>
  <div class="link">
    <a href="https://andrewhunt.design/client/thehaven" class="bg1"><h2 class="white" id="white">Haventype</h2></a>
    <div class=background></div>
    <a href="andrewhunt.design/client/thehaven" class="bg2"><h2 class="white"  id="white">Armchair Thought</h2></a>
    <div class=background>
    </div>
        <a href="#" class="bg3"><h2 class="white"  id="white">Riverside Food Lab   </h2></a>
    <div class=background>
    </div>
       <a href="#" class="bg4"><h2 class="white"  id="white">Junk Drawer</h2></a>
    <div class=background>
    </div>
   <p>
     <br>
    </p>
        <a href="#" class="bg5"><h2 class="white"  id="white">Illustration</h2></a>
    <div class=background>
    </div>
  </div>
 
</div>

Any suggestions would be appreciated.

Thank you!
Andrew Hunt

You will need to use JavaScript to achive this. Abit complex.

Do/will you use Personal or Business Plan?

Ah okay, I'm fine with using a bit of JavaScript! I'm using the Business Plan.

Also, thank you so much for your help, @tuanphan!! You're a legend. I use your Squarespace resources all the time. You're such an important member of the community and I seriously couldn't achieve my creative ideas without you!