0

I'm using ACF and have inside a loop: <?php echo wp_get_attachment_image( $button_image, 'small', 'sidebar-btn-icon', ["class" => "sidebar-btn-icon" , "alt"=> "sidebar icons"]); ?> This shows a svg icon.

fill: #eee doesn't work because there is no direct path.

Now I'm wondering how the change the color after a hover action?

1 Answer 1

0

On :hover you should change the svg-image, not the color. The second image is a copy with a different color. For example, if your image is shown in the background, you can change the style in this way:

.sidebar-btn-icon:hover {
    background-image: url(button_image_red.svg');
}
4
  • Well there are a group of buttons with several icons. So I need a .js or css action that overall will make a hover action for all the icon buttons. Your solution work for one button but not for a group with several icons.
    – Bouke
    Apr 1, 2021 at 13:13
  • I think for each image you need to make a separate class in css. For identical images, the class is the same. A class in css will generally work for all elements with this class. Sometimes something can be overridden, then you need a more strict description, for example, img.sidebar-btn-icon or button.sidebar-btn-icon, etc. In css, it is convenient to manage the image on: hover. For each group where the image differs, you need to describe the behavior in css.
    – Nikolay
    Apr 4, 2021 at 14:43
  • Nice, sounds good. What I've done: - set a <svg class="accountancy" in the icon. Saved and placed whit the updated class in the media library in Wordpress and updated the css file: svg.accountancy:hover path { fill: black !important; } Local in a html flle works it perfect but in Wordpress the hover don't work. Any idea?
    – Bouke
    Apr 7, 2021 at 15:19
  • @Bouke Thank you, I didn't know about this. This method doesn't work for me in Wordpress either. Here's what I found: The issue with displaying the SVG file via an IMG tag is that it isn’t possible to then adjust the properties of the SVG using CSS. For example if you wanted to change the colour of an SVG inserted into WordPress using an IMG tag, then .class { fill: #ffffff; } nor .class { color: #ffffff; } nor any other means will work. Fortunately there is a plugin "SVG Support", that allow to change the colour of the SVG image via CSS: .style-svg { fill: #fff; }.
    – Nikolay
    Apr 8, 2021 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.