SVG Fill on Hover Problem

[mintertweed]

I was reading the article by @chriscoyier about changing the fill of an SVG on hover, here. I then created my own CodePen, here, and it works. Success! But not totally. I then take the very same code and place it on my website, here. The magnifying glass does not change its fill. The only thing I can figure is that it has something to do with the fact that the magnifying glass is in a search form. Any suggestions on how to fix this? Thank you in advance!

[Paulie_D]

Are you actually using an SVG element or an SVG image?

You can’t affect the fill of an image AFAIK.

From the article.

>The problem with both `` and background-image…

>Is that you don’t get to control the innards of the SVG with CSS …

[Chester]

@mintertweed, out of topic, but, is your pink-line-bar in your footer designed to be pushed right by I think just a pixel. Or maybe just because of the drop-shadow.

[Paulie_D]

You’re not replacing the ``, you still need that, you are just replacing the ``.

Perhaps a reduced case Codepen?

[Paulie_D]

Found this: http://stackoverflow.com/questions/13649872/can-i-make-an-svg-image-button

[Paulie_D]

In this instance, I would give that specific button and ID (or class) and `display:none` it.

Next, add the hover to the **whole** svg but apply it to the `.glass`

http://codepen.io/Paulie-D/pen/lAinD

[Paulie_D]

Aw…shucks!

Hope you can get it all hooked up right!

[Paulie_D]

Still a little work to do. :)

Hide the #svg-button and change the hover as it’s only on the `.glass` at the moment, I think.

Updated the Pen a little. http://codepen.io/Paulie-D/pen/lAinD

Change the **visible** input type to “search”, set that and the svg to `inline-block`, aligned them middle and adjusted the height of the search box.

[Author]

Posts