悬停样式和转换不适用于Firefox中的附加元素

Question

我有一个SVG，我用它作为一种交互式平面图。当您将鼠标悬停在平面图的不同区域时（<g> elements），它们会在其他区域上方展开并浮动。元素的缩放由CSS触发，但是为了使悬停区域出现在其他区域上方，我使用jQuery将元素附加到SVG的底部。

这适用于Chrome，但不适用于Firefox。你能帮我吗？

的代码实际上超过了这个问题的字数限制，所以我不能添加一个片段，but I'm made a pen here for you to look at.

这里是代码的重要位：

CSS：

g.hoverFX { 
    transition: transform 0.3s linear; 
    transform-origin: 50% 50%; 
    transform: scale(1); 
} 
g.hoverFX:hover { 
    filter: url(#shadow); 
    transform: scale(1.1); 
} 

JS：

jQuery(function(){ 
    jQuery('g.hoverFX').hover(function(e){ 
    jQuery(this).appendTo('svg#Layer_2'); 
    }); 
}); 

HTML：

<g class="hoverFX" id="Conference_1_"> 
    <rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/> 
    <path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/> 
</g> 
<g class="hoverFX" id="Kitchen_1_"> 
    <rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/> 
    <path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/> 
</g> 
<g class="hoverFX" id="Catering_Store_1_"> 
    <rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/> 
    <path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/> 
</g> 
<g class="hoverFX" id="Clearance_Store_1_"> 
    <rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/> 
    <path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/> 
</g> 
<g class="hoverFX" id="Showroom_1_"> 
    <polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7 
     1262.6,783 "/> 
    <path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6 
     M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/> 
</g> 

我试图在网上找到一些答案，但我发现最有用的东西是this previous question，我认为这是朝着正确方向迈出的一步，所以希望它帮助。

Answer 1

原因与您发布的链接中描述的相同。在DOM中移动元素将会阻止Firefox正确处理悬停事件。

一个解决方案是将您的动画绑定到类而不是悬停事件。然后，在悬停时删除该类。

jQuery(function(){ 
 
    jQuery('g.hoverFX').hover(function(e){ 
 
    jQuery(this).addClass("hovering").appendTo('svg#Layer_2'); 
 
    },function(e){ 
 
    jQuery(this).removeClass("hovering"); 
 
    }); 
 
});

.st4{fill:#EEEEEE;} 
 
.st19{fill:#1B998B;} 
 
.st20{fill:#87BCDE;} 
 
.st21{fill:#D7263D;} 
 
.st22{fill:#042E6F;} 
 
.st48{fill:#7f3d82;} 
 
     
 

 
g.hoverFX { 
 
    transition: transform 0.3s linear; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(1); 
 
} 
 
g.hoverFX.hovering { 
 
    filter: url(#shadow); 
 
    transform: scale(1.1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<div class="interactive-wrapper" style="transform: translate(40%,0%);position:absolute;width: 50vw;"> 
 
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 2061.2 1110.7" style="enable-background:new 0 0 2061.2 1110.7;width: 50vw;" xml:space="preserve"> 
 

 
<defs> 
 
    <filter id="shadow"> 
 
     <feDropShadow dx="0" dy="0" stdDeviation="5"/> 
 
    </filter> 
 
    </defs> 
 
<g class="hoverFX" id="Conference_1_"> 
 
\t <rect x="342" y="206.5" class="st19" width="330.3" height="218.9"/> 
 
\t <path class="st4" d="M671,207.8V424H343.3V207.8H671 M673.7,205.1h-333v221.6h333V205.1L673.7,205.1z"/> 
 
</g> 
 
<g class="hoverFX" id="Kitchen_1_"> 
 
\t <rect x="674.3" y="206" class="st48" width="161.7" height="219.3"/> 
 
\t <path class="st4" d="M834.7,207.4V424H675.6V207.4H834.7 M837.3,204.7H672.9v222h164.4V204.7L837.3,204.7z"/> 
 
</g> 
 
<g class="hoverFX" id="Catering_Store_1_"> 
 
\t <rect x="1264.7" y="306.7" class="st20" width="554.7" height="476.3"/> 
 
\t <path class="st4" d="M1818.4,307.8v474.2h-552.7V307.8H1818.4 M1820.5,305.7h-556.8V784h556.8V305.7L1820.5,305.7z"/> 
 
</g> 
 
<g class="hoverFX" id="Clearance_Store_1_"> 
 
\t <rect x="1112.6" y="180.3" class="st21" width="706.8" height="124.4"/> 
 
\t <path class="st4" d="M1818.5,181.3v122.4h-704.8V181.3H1818.5 M1820.5,179.3h-708.8v126.4h708.8V179.3L1820.5,179.3z"/> 
 
</g> 
 
<g class="hoverFX" id="Showroom_1_"> 
 
\t <polygon class="st22" points="296.8,783 296.8,426.7 537.7,426.7 837.4,426.8 837.3,180.4 1110.6,180.4 1110.6,306.7 1262.6,306.7 
 
\t \t 1262.6,783 \t "/> 
 
\t <path class="st4" d="M1109.6,181.4l0.1,124.3l0,2.1h2.1h149.9v474.2H297.8V427.8h239.9l298.7,0l2.1,0l0-2.1l-0.1-244.3H1109.6 
 
\t \t M1111.6,179.3H836.3l0.1,246.4l-298.7,0H295.7V784h967.9V305.7h-152L1111.6,179.3L1111.6,179.3z"/> 
 
</g> 
 

 
</svg> 
 
</div>