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!
Okay, this is what I have thus far. It seems to work fairly well. In the link you posted, it says you can hide the “submit” button with CSS. How would I go about doing that? Also, the hit area is still held within the confines of the SVG. Any suggestions on how to increase it to a more user-friendly size?
Edit: I should note that the bounding box for the SVG is fairly large. I thought that would increase the hit area, but I guess not.