how do i change background color of whole page on hover over an image on that page

I was able to figure out how to make the block background change color if you hover over the image, but cannot figure out how to make the whole page background change when you hover over that image on that same page... 

Attached Image 1: before hover and code to the left.

Attached Image 2: after hover and code to the left. (It colors the block background black, which is cool but I want the whole page to be black no just the block. the image is the only thing on the page.

I saw this question asked here and tried this but it didn't work for me: 

  @creedon @tuanphan since you all were helping with a similar problem on the past forum referenced in my question above... thought I'd see if you knew what to do for this challenge I am dealing with? Thanks!

What is site url?

currently it isn't live. @tuanphan 
should I publish it or message you password?

@TaylorLove

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

https://mayflower-chihuahua-6fw3.squarespace.com/

password: tlc2022

I requested my domain to transfer, so once the transfer is complete it will be taylorlovecreative.com

@tuanphan @creedon

CSS doesn't have a parent selector so you can't put a hover pseudo-class on an element and then work back up the selector specificity hierarchy.

With a little help from Javascript you can accomplish the effect.

Please see Element Hover Parent Class Toggle.

For your needs you'd set the code constants thusly.

      const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';
      

This is specific to the poster's need.

You may want to target the hoverSelector more specifically than I did for a cleaner effect.

Let us know how it goes.

I am very new to putting in code, just find codes online and throw them in but I don't really understand it... yet! I want to learn it better so if you have any suggestion on where to learn let me know... @tuanphan @creedon I'd love to get to the point I actually understood code, difference between css and javascript etc and how to really understand looking at the "inspect" view on chrome shows. It is like a foreign language mostly to me but I find it fascinating yet confusing. haha.

@creedon I am still struggling to make it work... I already had that Element Hover Parent Class Toggle code injected in the header from when I added the mouse as a dot. 

If I put this

      const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';

in my custom css page it says there is an error and doesn't do what you show in the video, so I am doing something wrong. (see image). I tried getting rid of my old code and just using the one above, tried it with the old code plus the new one above, I tried putting this new code above mixed in with the old code (replacing the block words with this new code)... nothing worked for me. I also don't know what "set the code constants thusly" means exactly. 

then I also tried this in the inject code header section and updated this part 

  const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';
      

@creedon

@TaylorLove

My code needs to go in Page Header Code Injection for the page. Please see Per-page code injection.

The jQuery should stay in Settings > Advanced > Code Injection > HEADER.

Ohhh so I need a business or commerce plan to add it, right? @creedon

11 minutes ago, TaylorLove said:

I need a business or commerce plan to add it, right?

To use my code yes at a minimum the business plan.

@creedon I got a business plan now, but I am still struggling to make this work. Sorry! I am sure it is something simple, just very new to this... 

The jQuery is in Settings > Advanced > Code Injection > HEADER. (see image)

I added the code to the page by looking at the page, then clicking the gear icon next to that page and adding it in the page settings > advanced and update the code to this: (it didn't work if I added it to the page or on the index page... tried both). (see image)

const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';

so full code is:

<script>

  $( ( ) => {
  
    /*
    
      begin element hover parent class toggle
      
      Version       : 0.1d0
      
      SS Versions   : 7.1, 7.0
      
      Dependancies  : jQuery
      
      Notes         : this effect is not active in SS Preview to test it use
                      private browsing < https://bit.ly/3f6lhq2 >
                      
                      this is a base effect meant as a base for other effects.
                      this code alone shouldn't produce any visible change
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';
      
      // do not change anything below, there be the borg here
      
      if ( window.frameElement !== null ) return; // bail if in preview
      
      const clss = 'twc-ehpct';
      
      const $hoverElement = $( hoverSelector );
      
      const $parentElement = $hoverElement
      
        .parents ( parentSelector );
        
      $( hoverSelector )
      
        .on ( 'mouseover', function ( ) {
        
          $parentElement.addClass ( clss );
          
          } )
          
        .on ( 'mouseout', function ( ) {
        
          $parentElement.removeClass ( clss );
          
          } );
          
      // end element hover parent class toggle
      
    } );
    
  </script>

@TaylorLove

There is a note in my code that it doesn't actually make any visual changes. In other words it doesn't implement your specific effect.

What it does do is give someone the CSS selectors to be able to create an effect like you want.

After my code is installed then CSS needs to be created to accomplish the effect. Add something like the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  html:not( .squarespace-damask ) [id="home/title"].twc-ehpct {
  
    background-color : black;
    
    }
    
  </style>

My bad for not being more explicit.

@creedon Haha. I wish I could say I understood what you just meant but I am so "green" aka new to this I don't fully understand. I did try some things but no luck... I also read back thru everything you said and re-looked at the links you reference for reading more...

Here is what I have tried *see images. I tried making a video but it was too large to upload... 

I added this to the settings>advanced>code injection (header)

Then added the new code you mentioned previously here... Did I install the code in the correct place (pages >page on the "title" page clicked the gear icon> then advanced and copied it there)? I tried it with just this new code only, tried it just with the old code only, tried it with both of them... no luck on any attempts.

I feel bad I don't understand what you are saying. I really don't want to monopolize your time... but would like to get this to work if that is possible...
going forward if you have any suggestions on courses or youtube videos, etc that help me understand this as a whole better let me know (like general coding basics and such). I'd like to learn more just not sure where or how to start.... 

@TaylorLove

Ah ha! I think I see the issue. Move the code that you installed in the title page up to the Index page that contains the title page.

Let us know how it goes.

See image for what happened... still being weird, unfortunately.  @creedon

this is what I mean by "short code"
<style>   html:not( .squarespace-damask ) [id="home/title"].twc-ehpct {        background-color : black;          }        </style>

this is what I mean by "long code"

<script>

  $( ( ) => {
  
    /*
    
      begin element hover parent class toggle
      
      Version       : 0.1d0
      
      SS Versions   : 7.1, 7.0
      
      Dependancies  : jQuery
      
      Notes         : this effect is not active in SS Preview to test it use
                      private browsing < https://bit.ly/3f6lhq2 >
                      
                      this is a base effect meant as a base for other effects.
                      this code alone shouldn't produce any visible change
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425';
      
      const parentSelector = '.Index-page';
      
      // do not change anything below, there be the borg here
      
      if ( window.frameElement !== null ) return; // bail if in preview
      
      const clss = 'twc-ehpct';
      
      const $hoverElement = $( hoverSelector );
      
      const $parentElement = $hoverElement
      
        .parents ( parentSelector );
        
      $( hoverSelector )
      
        .on ( 'mouseover', function ( ) {
        
          $parentElement.addClass ( clss );
          
          } )
          
        .on ( 'mouseout', function ( ) {
        
          $parentElement.removeClass ( clss );
          
          } );
          
      // end element hover parent class toggle
      
    } );
    
  </script>

15 hours ago, TaylorLove said:

See image for what happened... still being weird, unfortunately.

When I look at the page I can not find the long code. If it is not there, the effect won't work. I installed the code once again locally an it worked as I showed in my video.

@creedon I took the long code off the home index because it was showing the page messed up like in that image I last shared and I have some potential clients looking at my website this week and didn't want it to look weird. 

However, now it is working! I guess it wouldn't show the effect while I was viewing in squarespace backend of editing but when i looked at the page regularly outside of squarespace it did work! haha. It just didn't show the effect while I was in editor mode... didn't know that was a thing! Sorry about all the confusion! Is that normal to have code not display proper when testing in editor mode on squarespace but works fine when viewed on the actual website url/not squarespace view. If so, I didn't know that... Thanks again for your help and if you got any more time could you point me in a direction of reading or help with this or tag any other squarespace helpers you know who could help: 

On 4/8/2022 at 5:09 PM, TaylorLove said:

It just didn't show the effect while I was in editor mode... didn't know that was a thing!

Some effects would interfere with the editor if they were active in the editor. From my code...

Notes         : this effect is not active in SS Preview to test it use
                private browsing < https://bit.ly/3f6lhq2 >

Quote

Is that normal to have code not display proper when testing in editor mode on squarespace but works fine when viewed on the actual website url/not squarespace view.

This is my custom code not a SS built-in effect. Custom code may or may not work in the editor depending on how it is implemented and what it does.