CSS - Not include footer in changes

Site URL: http://www.wilmingtonapparelco.com

Hi, I used CSS on my page to remove underlines for links and change color to black upon hover, but I don't want those changes to affect my footer. What can I do to modify my code to make this happen? 

Site password: temppass

Current code:

a {  background-image: none !important;  }
 a { color: white !important; 
}  
a:hover { color: black !important; }

Hi @WACweb, the code may depend on what template you are using. Are you in Squarespace 7.1? Or 7.0? If 7.0, what template family? You can find this under Help when logged into your site.

Please post the URL for your site.

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

We can then take a look at your issue.

@christypriceUsing 7.1

@creedon www.wilmingtonapparelco.com

password: temppass

Please remove, make a copy somewhere, your original CSS.

Replace with the following.

/* hide underlines */

body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-item--active a,
.bright .sqs-block-html a,
.sqs-block-html a

  {
  
    background-image : none;
    
    }

/* black hover */

a:hover,
body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper a:hover,
body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper .header-nav-item--active a:hover

  {
  
    color : black;
    
    }

/* footer light gray hover */

#footer-sections .bright .sqs-block-html a:hover {

  color : lightgray;
  
  }

If there are any places where text or links are not being color properly. Let us know by posting a URL to the page effected and describing where things are not working.

Let us know how it goes.

11 hours ago, creedon said:

Please remove, make a copy somewhere, your original CSS.

Replace with the following.

a {

  background-image: none;
  color: #fff;
  
  }

a:hover,
body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper a:hover,
body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .header-nav-wrapper .header-nav-item--active a:hover

  {
  
    color: #000;
    
    }

If there are any places where text or links are not being color properly. Let us know by posting a URL to the page effected and describing where things are not working.

Let us know how it goes.

@creedon So sorry - I don't believe I may have asked my question clearly. It appears that this code removed the original intended effects and added the underline back and removed the hover effect on all links. 

Instead, how might I keep the effects of the original code (no underline on links, hover color change to black) and only the footer hover color change to gray (also no underline). I'm essentially looking to change the color theme from Accent Dark to White Minimal in the footer.

The url is the same www.wilmingtonapparelco.com - it's the homepage where the issue is.

@WACweb

I've updated my code post. Let's see if it gets you closer.

Hi @WACweb, here's how I'd solve it to have the code affect only the header and page:

/* customization for header AND main page, not footer */
#page a,  #header a {
  background-image: none !important;   
  color: white !important; 
}  
#page a:hover,  #header a:hover { color: black !important; 
}