Is it possible to style edge hover?

[atyshka]

I have some overlapping edges, and I think it would be helpful to use hover effects to help resolve overlapping edges. However, it seems that all edges are grouped into a single element, and the :hover event is triggered on the parent for all edges at once, rather than the particular edge that is hovered over. Is there any way to resolve this with CSS? The only solution I can think of would be to restructure the design to use separate SVGs for each edge rather than a single SVG for all.

[atyshka]

This code highlights all edges when any is hovered:

:deep(g:hover .vue-flow__edge-path) {
  stroke: orange !important;
}

This code, on the other hand, does not work, because individual edges don't receive hover events:

:deep(.vue-flow-edge:hover .vue-flow__edge-path) {
  stroke: orange !important;
}

[bcakmakoglu]

This works fine for me 🤔

.vue-flow__edge:hover path {
  stroke: red;
}

Here's a sandbox.

[atyshka]

Oops, I mistyped that class... to be fair though the mix of dashes and underscores is a bit counterintuitive 😄. Thanks!

[bcakmakoglu]

Idk, it's just BEM naming and basically just the same as React Flow, from which I don't want to deviate too much ^^