Different background-color for nav overlay text

I placed a semi-transparent box around my index navigation radio buttons [see attachment ] using this custom css code:

/* Transparent box behind navigation */
.Index-nav-text span {
  background-color: hsla(30, 0%, 25%, 0.30);
  padding: 8px;
  border-radius: 5px;
}

I'd like to use a different background-color box when the index navigation switches to overlay mode but can't figure out the code. I tried this but it didn't work:

.Index-nav-overlay-text span {
  background-color: hsla(30, 100%, 25%, 0.30);
  padding: 5px;
  border-radius: 5px;
}

Is this possible?

https://spinach-viola-en24.squarespace.com/

pass: support

Have you solved the problem yet?

On 12/4/2019 at 8:42 PM, tuanphan said:

Have you solved the problem yet?

I haven't solved the problem yet. Do you have any ideas?

22 hours ago, paulcristo said:

I haven't solved the problem yet. Do you have any ideas?

You mean "Home"?

Add to Home > Design > Custom CSS

.Index-nav-item:hover .Index-nav-text span {
    background: red;
}

4 hours ago, tuanphan said:

You mean "Home"?

Add to Home > Design > Custom CSS

.Index-nav-item:hover .Index-nav-text span {
    background: red;
}

 

But can you have two different background colors for the overlay section and the regular section, like how the color of the radio buttons changes from orange to white when scrolling between them?

Thank you for your help!

@paulcristo Have you solved yet?

On 12/19/2019 at 7:04 AM, tuanphan said:

@paulcristo Have you solved yet?

I haven't yet. Do you have any ideas? I'm still trying to have two different background colors for the overlay section and the regular section, like how the color of the radio buttons changes from orange to white when scrolling between them?

15 hours ago, paulcristo said:

I haven't yet. Do you have any ideas? I'm still trying to have two different background colors for the overlay section and the regular section, like how the color of the radio buttons changes from orange to white when scrolling between them?

.Index-nav-text span {
    background: red;
}
.Index-nav-item:hover .Index-nav-text span {
    background: green;
}

You mean text background color?