Search code examples
jsplumb

Set style for connector and endpoints on hover

I'm trying to create a css style for all connections and endpoints which are connected to a specific element. I have managed to color all source/targets but I'm not managing to color the connections (lines)

Here is my current code...

var endpoints = jsPlumb.getEndpoints(this);

for (var i = 0; i < endpoints.length; i++) {
if (endpoints[i].connections[0] != null) {
    $(endpoints[i].connections[0].target).addClass('red_color');
    $(endpoints[i].connections[0].source).addClass('red_color');
}

}

Solution

  • The connection class also has an addClass method. So you could call

    endpoints[i].connections[0].addClass('red_color')

    and then, as discussed at https://docs.jsplumbtoolkit.com/community/lib/styling-via-css#css-for-svg-elements, you can target the connector path like this:

    svg.red_color path {
  stroke:red;
  stroke-width:3;
}