Edge hover styling

[gitHoussem]

Hello,
Quick question:
When I hover over an edge, I have a specific styling to make the stroke take an orange color. However, I am not able to make on edge move on top of all other overlaid edges so as it becomes visible.
Here's a gif and some screenshots that better explain my issue:

In the below gif, the first edge I hover over is the (apparently) a top one. So, when it becomes orange it hides the other bottom edges that are in black. However, the second hover on the other edge doesn't do that.

In this screenshot I am hovering over the 'horizontal' edge, it becomes orange but the edge on top of it is still appearing in black.

I apologize if the issue comes from my code and not the library, I am asking anyways because I tried playing with the z-index in css but couldn't make it work.

Thanks for your time.

[bcakmakoglu]

There a property called edge.zIndex that you can modify.

[gitHoussem]

Thanks for the quick answer.
Where and how should this be used when hovering ?
For context, I am using :default-edge-options prop in <VueFlow> and a custom css on hover below:

  .vue-flow__edge-path:hover {
    stroke: orange !important;
    stroke-width: 2;
  }

[gitHoussem]

is there an "on-hover" event on edges so that I update the css dynamically or something like that ?

[bcakmakoglu]

onEdgeMouseEnter(({ edge }) => {
  edge.zIndex = 9999
  edge.style = {
    stroke: 'orange',
    strokeWidth: '2px',
  }
})

onEdgeMouseLeave(({ edge }) => {
  edge.zIndex = undefined
  edge.style = {}
})

[bcakmakoglu]

Here's an example.

[gitHoussem]

Thank you so much man !
You rock !