如何在Cytoscape的mouseout事件中移除节点/边的样式属性？

你遇到的核心问题是用style('border-width', null)这种方式没法正确重置Cytoscape元素的样式——Cytoscape的样式引擎对直接设置null的处理并不像预期那样会清除内联样式并回退到默认值。这里有两种更可靠的解决方案：

方案1：用CSS类管理悬停样式（推荐） #

这是Cytoscape官方更推荐的做法，通过添加/移除类来控制临时状态，不仅代码更整洁，也能避免样式冲突。

首先，在你的Cytoscape样式定义中添加一个专门的hover类：

// 初始化样式时添加hover类的定义
cy.style()
  // 默认样式：节点和边无边框
  .selector('node, edge')
    .style('border-width', '0px')
    .style('border-color', '#AF0000')
  // 悬停时的样式类
  .selector('.hover-highlight')
    .style('border-width', '2px')
  .update();

然后修改你的事件绑定逻辑，用类的添加/移除替代直接修改样式：

// cy 是你的Cytoscape实例
cy.on('tap', function(event){ 
  var evtTarget = event.target; 
  if( evtTarget === cy ){ 
    console.log('tap on background'); 
    $("#nodes").hide(); 
    $("#no_selected").show(); 
  } else { 
    console.log("Display Info") 
    displayInfo(evtTarget._private.data.properties); 
  } 
}).on('mouseover',function(event){ 
  var evtTarget = event.target; 
  if( evtTarget !== cy ){ 
    console.log("Mouse Over"); 
    evtTarget.addClass('hover-highlight'); // 添加悬停类
  } 
}).on('mouseout',function(event){ 
  var evtTarget = event.target; 
  if( evtTarget !== cy ){ 
    console.log("Fired"); 
    evtTarget.removeClass('hover-highlight'); // 移除悬停类
  } 
});

方案2：直接重置为默认样式值 #

如果你不想用类的方式，也可以直接把样式值设回默认的初始值，而不是设置null。比如你的默认边框宽度是0px，那mouseout时就设回这个值：

// 修改mouseout事件的处理逻辑
.on('mouseout',function(event){ 
  var evtTarget = event.target; 
  if( evtTarget !== cy ){ 
    console.log("Fired"); 
    evtTarget.style('border-width','0px'); // 设回默认宽度
    // 如果默认border-color也有设置，同样设回默认值
    // evtTarget.style('border-color', '你的默认颜色');
  } 
});

为什么方案1更好？因为当你需要给悬停状态添加更多样式（比如背景色变化、透明度调整）时，只需要在.hover-highlight类里添加新样式即可，不用修改事件逻辑，代码可维护性更高。

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