Skip to main content

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/

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!

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.

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