已实现jsPlumb源/目标着色，如何为关联连接（线条）设置悬停样式？

要给关联的jsPlumb连接线条添加悬停样式，你需要直接操作连接对象的样式或给其DOM元素添加CSS类，以下是修改后的实现：

1. 补充CSS样式 #

先定义连接和元素的悬停样式：

/* 源/目标元素的红色样式 */
.red_color {
  border-color: #ff0000 !important;
  background-color: rgba(255, 0, 0, 0.2) !important;
}

/* 连接线条的红色样式 */
.hovered-connection {
  stroke: #ff0000 !important;
  stroke-width: 3px !important;
}

2. 修改JavaScript代码 #

遍历端点的所有连接（不止第一个），同时处理连接线条的样式：

// 元素鼠标进入时的处理（假设this是当前悬停的元素）
var endpoints = jsPlumb.getEndpoints(this);
for (var i = 0; i < endpoints.length; i++) {
  // 遍历当前端点的所有连接
  for (var j = 0; j < endpoints[i].connections.length; j++) {
    var connection = endpoints[i].connections[j];
    // 给源、目标元素加样式类
    $(connection.source).addClass('red_color');
    $(connection.target).addClass('red_color');
    // 给连接线条添加CSS类
    $(connection.canvas).addClass('hovered-connection');
    // 也可以直接用jsPlumb API设置样式（二选一即可）
    // jsPlumb.setStyle(connection, { stroke: '#ff0000', strokeWidth: 3 });
  }
}

// 元素鼠标离开时恢复样式
var endpoints = jsPlumb.getEndpoints(this);
for (var i = 0; i < endpoints.length; i++) {
  for (var j = 0; j < endpoints[i].connections.length; j++) {
    var connection = endpoints[i].connections[j];
    $(connection.source).removeClass('red_color');
    $(connection.target).removeClass('red_color');
    $(connection.canvas).removeClass('hovered-connection');
    // 恢复默认样式（如果用API设置的话）
    // jsPlumb.setStyle(connection, { stroke: '#原来的默认颜色', strokeWidth: 2 });
  }
}

关键说明 #

• 不要只处理connections[0]，一个端点可能存在多个连接，需要遍历所有connections
• 连接的DOM元素在SVG渲染模式下通过connection.canvas获取，若使用Canvas渲染可尝试connection.el
• 使用!important确保自定义样式覆盖jsPlumb的默认样式

内容的提问来源于stack exchange，提问作者sharp