Box hover change text color too

  • 20 June 2018
  • 3 replies
  • 120 views
E

Hello,
I have a box that on hover it changes color. That works great but if I want to also change the text element inside the box the code doesn’t work.

This is the code that works:

#lp-pom-box-203:hover {
background: #00865a;}

#lp-pom-box-203:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}

but as soon as I add a CSS combinator (+ ~ >) it stops working:

#lp-pom-box-203:hover + #lp-pom-text-32 {
background: #00865a;
color: #000000;}

#lp-pom-box-203:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;}

I based my code out of this page
http://unbouncepages.com/link-hover/

3 replies

C

I recently did this for my site. Here’s the code I used.

#lp-pom-box-12 {
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
background: #FFFFFF;
}
#lp-pom-box-12:hover {
background-color: #696969;
color: #FFFFFF;
}

Hope that helps!

E

Thanks for replying.
Do you have a text element inside the box? Your code is similar to mine. It changes the box color but the text elements stay with the original color in my case #FFFFFF and not #000000 which I want those to be changed to.

I have two text elements #lp-pom-text-32 #lp-pom-text-33 that I will like to change the color on hover.

C

In my code, the text is located inside the box, so the background-color refers to the box and the color refers to the text color. I’d suggest another piece of code earlier that denotes the text color, and then a different color in the code I posted.

Reply


Terms & ConditionsCookie settings