使用jQuery，在悬停在不同元素上时更改SVG颜色

Question

我的链接看起来像这样：

顶部是svg，底部是锚链接。因为你无法在CSS中定位父母，所以当我将鼠标悬停在它下方的链接上时，我正试图改变svg的颜色。我试图用jQuery做这个但是还没有运气，希望你们能帮忙。我需要上DOM，然后沿着不同的子路径前进。

我试过.on（'mouseover'，函数....我试过.hover（）

我也尝试使用锚链接来包围所有内容，但我想你不能用HTML做到这一点。浏览器会立即关闭链接。

我还尝试使用与之相同的CSS向svg添加一个CSS类：hover，但是即使我在检查时看到“填充”值发生了变化，颜色也没有。

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'});
    });
});

获得一些帮助之后，这就是最终的工作

$(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");

Answer 1

试试这个..

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