Hello,
I'm trying to invert the icon link (Circle Icon) widget colors on Hover. I've been trying different CSS values but can't seem to figure out the correct appoach.
I have an icon link widget that looks like this:
When I hover on it, I'd like All text to be white, the background blue and the glyph to be inverted (wrench blue, circle white).
my css for the page (and Icon_widgets) is:
.icon_widgets{
height: 120px;
background-color:white;
color:#00477d;
border:1px;
border-style:solid;
border-radius: 2px;
border-width: 1px;
border-color: #DEE5E7;
margin-bottom: 20px;
margin-left:-15px
}I've tried .icon_widgets:Hover {
.icon_widgets:Hover a i{
color: white;
--invert:invert(100%);
}and a variety of other options....
Does anyone have a suggestion?
Thank you!
Hi All,
NVM, I resolved my issue by using the "Icon Link Custom" widget instead... and simply inversed the colors.
Cheers.
