Using jQuery, Change SVG Color on Hover Over Different Element

Question

I have a link that looks like this:

The top is an svg and the bottom is an anchor link. Because you can't target parents in CSS, I'm trying to change the color of the svg when I hover over the link below it. I'm attempting to do this with jQuery but haven't had any luck yet, hopefully you guys can help. I need to go up the DOM, then down a different child path.

I've tried .on('mouseover', function.... and I've tried .hover()

I also tried surrounding everything with an anchor link, but I guess you can't do that in HTML. The browser will close the link immediately.

I've also tried adding a CSS class to the svg, using the same CSS that works with :hover, however even though I see the "fill" value change when inspecting, the color just doesn't.

HTML

<div class="tag-container test-container">
   <div class="top clearfix">
     <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
     <svg width="41px" height="48px" viewBox="0 0 41 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title style="fill: rgb(147, 147, 147);">filter-icn-bedbug</title>
    <desc style="fill: rgb(147, 147, 147);">Created with Sketch.</desc>
    <defs style="fill: rgb(147, 147, 147);"></defs>
    <g id="Pest-Peeve-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="fill: rgb(147, 147, 147);">
        <g id="Shopfront" transform="translate(-402.000000, -706.000000)" fill="#C8C8C8">
            <g id="filter-icn-pest" transform="translate(154.000000, 698.000000)">
                <path d="M284.00492,32.6228518 L280.670988,31.5488791 C280.795828,31.9789813 280.909553,32.4236196 281.008742,32.8870696 L284.00492,32.9871132....a lot of code..... 278.646173,11.2639638 278.483709,11.2639638 C278.230607,11.2639638 277.980925,11.1459636 277.822737,10.9244995 L277.822737,10.9244995 Z" id="filter-icn-bedbug"></path>
            </g>
        </g>
    </g>
</svg>
</div>
   <div class="bottom">
      <a title="Show products matching tag Bedbugs" href="/collections/all/bedbugs">Bedbugs</a>
   </div>
</div>

CSS (SASS)

.blue-hover {
    path {fill: $PPblue;}
}

JavaScript

$(document).ready(function() {
    $(".test-container a").on('mouseover', function() {
        $(this).closest('.tag-container').find('svg').children().css({'fill': '#0BACFF'});
    });
    $(".test-container a").on('mouseleave', function() {
        $(this).closest('.tag-container').find('svg').children().css({'fill': '#939393'});
    });
});

After getting some help, this is what finally worked

$(document).on({
    mouseenter: function () {
        $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'});
    },
    mouseleave: function () {
        $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'});
    }
}, ".test-container a");

Perhaps a better option would be to have the `a` tag wrap both the `svg` and `div.bottom`, this way image and text are linked and you can style with CSS. — methodofaction, Sep 16 '16 at 09:31
That's what I tried at first but it doesn't work. If there are other links inside a link, the browser won't render it that way. [link]http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct[link] — Kevmon, Sep 16 '16 at 10:05
You simply remove the inner a tag, if the browser supports `svg` it also supports html5 (allowing you to nest block elements). — methodofaction, Sep 16 '16 at 10:12

sp_m · Accepted Answer · 2016-09-16T05:50:31.120

4

Try this one..

$(document).on({
    mouseenter: function () {
        //change color on mouse enter
    },
    mouseleave: function () {
        //change color on mouse leave
    }
}, ".test-container a");

edited Sep 16 '16 at 05:50

answered Sep 16 '16 at 05:27

sp_m

2,647
8
38
62

Thank you! I updated my post with the answer at the end. Do you know why this way works and other ways don't? – Kevmon Sep 16 '16 at 09:25

Using jQuery, Change SVG Color on Hover Over Different Element

1 Answers1