英文:
How can I change one svg path ID element when hovering over another element
问题
我为SVG路径元素分配了ID属性，并将它们命名为opacity-1n和opacity-1e。我希望当鼠标悬停在opacity-1n上时，opacity-1e会出现。
英文:
I assigned SVG path elements with an ID property and named them opacity-1n and opacity-1e. I want to hover the mouse over opacity-1n, then opacity-1e will appear.
<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
</g>
#opacity-1n:hover #opacity-1e {opacity: 1;}
#opacity-1e {opacity: 0;}
Also tried:
#opacity-1n:hover + #opacity-1e {opacity: 1;}
#opacity-1n:hover > #opacity-1e {opacity: 1;}
#opacity-1n:hover ~ #opacity-1e {opacity: 1;}
答案1
得分: 2
你只需隐藏第二个 path 元素。
#opacity-1n:hover + #opacity-1e {
opacity: 1;
}
#opacity-1e {
opacity: 0;
}
<svg>
<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
</g>
</svg>
英文:
You just need to hide the second path-element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#opacity-1n:hover + #opacity-1e {
opacity: 1;
}
#opacity-1e {
opacity: 0;
}
<!-- language: lang-html -->
<svg>
<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
</g>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论