Question

我刚得到一个SVG，并在其中的一些g元素中添加了CSS类，以便在悬停时对它们进行样式设置。但是，仅当g内的路径元素也被悬停时，悬停伪选择器才适用。当仅将g背景悬停时，如何解决此问题以使悬停也适用？不幸的是，出于法律原因，我无法向您显示代码。

Answer 1

    var container = $('.svgcontainer');
    var words = $('.words-as-g-in-container');
    words.each(function (i, el) {
        var rect = el.getBBox();
        var svgns = "http://www.w3.org/2000/svg";
        var help = document.createElementNS(svgns, 'rect');
        help.setAttributeNS(null, 'x', rect.x);
        help.setAttributeNS(null, 'y', rect.y);
        help.setAttributeNS(null, 'height', rect.height);
        help.setAttributeNS(null, 'width', rect.width);
        help.setAttributeNS(null, 'fill', 'transparent');
        el.appendChild(help);

    });
    words.hover(function () {
        container.addClass('svgcontainer--with-hover');
    }, function () {
        container.removeClass('svgcontainer--with-hover');
    });

SVG g元素上的：hover仅在g内的路径也被悬停时才适用

1 个答案: