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

Question

我有一个如下所示的链接：

顶部是 svg，底部是锚链接。因为您不能在 CSS 中定位父母，所以当我将鼠标悬停在其下方的链接上时，我试图更改 svg 的颜色。我正在尝试用 jQuery 做到这一点，但还没有运气，希望你们能提供帮助。我需要先上 DOM，然后再下不同的子路径。

我已经尝试过 .on('mouseover', function.... 并且我已经尝试过 .hover()

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

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

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