Changing the rollover color

Hello,

Can you share the site link so that I can check it? Try to use the below code and check it works for you or not.

span.ops-icon-wrap:hover {
    background-color: #880488 !important;
}

Hello Amit,

My site is currently under construction, not public yet.

The code works, but the page it’s still showing the original colors if the mousse pointer is over the text.

What a I want to do is overwrite the buttons’s default colors(red por pinterest, blue for facebook, green for email icon).

If you can create a staging site where I can see it, then it will be very helpful for me to give the correct code. Hope you understand it.

Hello Amit,

You’re rigth, a staging site would be great for this and other purposes. I tried creating one, but I had some issues.

So, let me fix this during the weekend, and I will post an url for you on monday, for checking what I’m talking about the colors.

Thank you.
Angie

Okay, sure

Hi,

So, this is the link

https://laika.tierralavanda.com/tienda/jabones/jabon-de-cafe-cacao-y-coco/

Is a product page, and after the description, you can see the social sharing buttons.
The code you send me is active, so, if you put the mousse pointer over the icon, it will change to purple, but if you put the mousse pointer over the text, it will change to the original color (red for pinterest, blue for facebook, etc).

I try to showing only the purple color in the over action.

Any sugestion will be apretiated.

Thank you.

Hello,

Add the below code to the Customize > Custom CSS section to change the color. Edit the color as per your need.

.oew-product-share ul li.pinterest a:hover .ops-icon-wrap {
    background-color: #8224e3;
}
.oew-product-share ul li.pinterest a:hover {
    color: #8224e3;
}

.oew-product-share ul li.facebook a:hover .ops-icon-wrap {
    background-color: #8224e3;
}
.oew-product-share ul li.facebook a:hover {
    color: #8224e3;
}

.oew-product-share ul li.email a:hover .ops-icon-wrap {
    background-color: #8224e3;
}
.oew-product-share ul li.email a:hover {
    color: #8224e3;
}

Hi,

That was exactly what I wanted.

Thank you very much.

You’re welcome!