Changing background on hover.

David Schure
David Schure used Ask the Experts™
on
I would like to make the background lighter on hover.  What I have is not working. Its on the streaming services.  Amazon, etc.
http://mediascrubber.com/index.html

<div>
  	<a href="">
    <img src ="socials\music-service_amazon.svg" class="service">
    </a>
</div>

Open in new window


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

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
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;
}

Open in new window


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

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

Open in new window

Author

Commented:
I tried both and neither worked.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Try this

.service:hover {
	opacity: 0.5;
}

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

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

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

Open 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;
}

Open in new window


Then on hover :

.service:hover{
    opacity: 1; 
}

Open in new window


LIVE EXAMPLE
fxPTaH3vwz.gif

Author

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

https://islandrecs.lnk.to/Sober
Analyst Developer
Distinguished Expert 2018
Commented:
Then the selector you're looking for is #hap-wrapper div, example:

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

Open in new window


You could use the previous selector with the other one using opacity to toggle the opacity and background color on hover.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Alternatively
#hap-wrapper > div:hover {
	background: rgba(255,255,255,.05);
}

Open in new window

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018
Commented:
You could also use the :not(:first-child) selector to exclude the first div from the rules and prevent toggle effect for the cover image and the text just before the list of music services:

#hap-wrapper>div:not(:first-child){
    /* Your attributes here */
}

Open in new window

Author

Commented:
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>

Open in new window


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

Open in new window


I tried naming the div's containing the music services and adding the code to it but it did nothing.
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

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

Author

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

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

Open in new window

Author

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

Open in new window

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

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

Author

Commented:
Thanks to the both of you.  This really helped me and I learned a lot!
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
You're welcome anytime.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial