Forums

Give help. Get help.

  • # July 13, 2013 at 10:21 pm

    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!

    # July 14, 2013 at 3:18 am

    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 …

    # July 14, 2013 at 3:40 am

    @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.

    # July 15, 2013 at 6:40 am

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

    Perhaps a reduced case Codepen?

    # July 15, 2013 at 7:40 am

    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

    # July 15, 2013 at 7:45 am

    Aw…shucks!

    Hope you can get it all hooked up right!

    # July 15, 2013 at 8:25 am

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag