Custom hover color for icon boxes in sections
Hi, Muffingroup,
We would like to set a custom icon hover color for a certain section. We managed to set a custom color for icons through custom CSS for the page and section. But hover color is still the main theme color. So, if an icon in an icon box is gray now, the hover color is blue, for example. We use .dark for this section.
We use the following CSS to set icon colors:
.section_class .icon_box .icon_wrapper { color: #color; }
But we cannot figure out how set a hover color and make the icon color change to white on hover. An inspector mode in the browser was of no help.
We would like to set a custom icon hover color for a certain section. We managed to set a custom color for icons through custom CSS for the page and section. But hover color is still the main theme color. So, if an icon in an icon box is gray now, the hover color is blue, for example. We use .dark for this section.
We use the following CSS to set icon colors:
.section_class .icon_box .icon_wrapper { color: #color; }
But we cannot figure out how set a hover color and make the icon color change to white on hover. An inspector mode in the browser was of no help.
Comments
Please, look for a green section after a section with an image background and 3 items in a row.
The section in question contains icon boxes with now gray icons.
.icon_box:hover .icon_wrapper:before, .icon_box a:hover .icon_wrapper:before { background-color: #000; }.icon_box .icon_wrapper i:hover { color: #FFF; }.section_class icon_box:hover .icon_wrapper i { color: #color_number; }
would bring the exact result that you have in your demo for icon color on hover.
.icon_box .icon_wrapper i { color: #000 !important; }