Changing background on hover.

Your rule trys to traget the anchor inside element with .service class what is the img when there's no anchor inside it, it must be :

#hap-wrapper a:hover {
   transition: background-color .3s ease;
    background-color: #9f9145;
}

Select allOpen in new window

Or you could attach the rules directly to the image like :

.service:hover{
    filter: brightness(110%); 
}

Select allOpen in new window

I tried both and neither worked.

Try this

.service:hover {
	opacity: 0.5;
}

Select allOpen in new window

I have already tested on your website the following rule and it works just fine:

.service:hover{
    filter: brightness(110%); 
}

Select allOpen in new window

I suggest also to give the items with class service a low opacity as 0.5 for example then toggle it to 1 on hover, something like :

.service {
    display: block;
    padding-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 180px;
    opacity: 0.5;
}

Select allOpen in new window

Then on hover :

.service:hover{
    opacity: 1; 
}

Select allOpen in new window

LIVE EXAMPLE
fxPTaH3vwz.gif

Okay these work.  However I was aiming for something like this..... where the entire background becomes lighter.

https://islandrecs.lnk.to/Sober

Yes these work.  Is there a way to exclude the picture and the song info from the mix?

<div id="highlight">
  	<a href="">
    <img src ="socials\music-service_amazon.svg" class="service">
    </a>
    <!--div class="play">Download</div-->
</div>

Select allOpen in new window

#highlight div:hover {
    transition: background-color .3s ease;
    background-color: #9f9145;
}

Select allOpen in new window

I tried naming the div's containing the music services and adding the code to it but it did nothing.

Check my the previous comment covering that using :not(:first-child) selector.

That turned out weird....it selected almost everything.....

#hap-wrapper>div:not(:first-child){
    transition: background-color .3s ease;
    background-color: #9f9145;
}

Select allOpen in new window

This worked.

#hap-wrapper>div:not(:first-child):hover{
    transition: background-color .3s ease;
    background-color: #9f9145;
}

Select allOpen in new window

Yes my bad sorry, I have just missed the :hover

Thanks to the both of you.  This really helped me and I learned a lot!

You're welcome anytime.