How can I change one svg path ID element when hovering over another element

Question

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;}

Answer 1

You just need to hide the second path-element.

#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>