我添加了我的 j Query 代码，它更改了 SVG 的悬停 g 标签上的索引.. 它在 chrome 中工作正常，但在 Firefox 中则不然
在 Chrome 中打开此代码，然后运行，您会看到每一行都会在其他 2 行之上发生变化
但它在 Firefox 中不起作用。请帮忙
$('.bus').hover(function(){
this.parentNode.appendChild(this);
});line{stroke: #ccc;stroke-dasharray: 0;stroke-width: 5;}
.color1:hover line, .color1.active line {stroke:#913ccd; pointer-events:all;}
.color1:hover .trip_start_icon path, .color1.active .trip_start_icon path{stroke:#913ccd;stroke-width: 3; fill:#C9CCD6; pointer-events:all; }
.color1 .trip_start_icon path, .color1.active .trip_start_icon path{fill:#913ccd; pointer-events:all;}
.color1:hover circle, .color1.active circle{fill:#913ccd; pointer-events:all;}
.color2:hover line {stroke:#f15f74;}
.color2:hover .trip_start_icon path{stroke:#f15f74;stroke-width: 3; fill:#C9CCD6;}
.color2 .trip_start_icon path{fill:#f15f74;}
.color2:hover circle{fill:#f15f74;}
.color3:hover line {stroke:#f76d3c;}
.color3:hover .trip_start_icon path{stroke:#f76d3c;stroke-width: 3; fill:#C9CCD6;}
.color3 .trip_start_icon path{fill:#f76d3c;}
.color3:hover circle{fill:#f76d3c;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>最佳答案
请检查是否仍然遇到任何问题，然后告诉我
line{stroke: #ccc;stroke-dasharray: 0;stroke-width: 1;}
.color1:hover line, .color1.active line {stroke:#913ccd; pointer-events:all;}
.color1:hover .trip_start_icon path, .color1.active .trip_start_icon path{stroke:#913ccd;stroke-width: 3; fill:#C9CCD6; pointer-events:all; }
.color1 .trip_start_icon path, .color1.active .trip_start_icon path{fill:#913ccd; pointer-events:all;}
.color1:hover circle, .color1.active circle{fill:#913ccd; pointer-events:all;}
.color2:hover line {stroke:#f15f74;}
.color2:hover .trip_start_icon path{stroke:#f15f74;stroke-width: 3; fill:#C9CCD6;}
.color2 .trip_start_icon path{fill:#f15f74;}
.color2:hover circle{fill:#f15f74;}
.color3:hover line {stroke:#f76d3c;}
.color3:hover .trip_start_icon path{stroke:#f76d3c;stroke-width: 3; fill:#C9CCD6;}
.color3 .trip_start_icon path{fill:#f76d3c;}
.color3:hover circle{fill:#f76d3c;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>关于jquery - 更改索引运行时间时，SVG 悬停效果不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44773190/