Jump to content

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

Recommended Posts

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.):

1050984925_ScreenShot2021-06-17at2_55_31PM.thumb.png.1b6df1d2078a038a699a7fb424ddeb0a.png
 

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

1968827826_ScreenShot2021-06-17at2_55_39PM.thumb.png.b501da9cedb2d5526ee2dd08d44e087d.png
 

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

Link to comment
  • Replies 2
  • Views 568
  • Created
  • Last Reply

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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.