Cytoscape 在事件发生时从元素中删除样式

Question

当我有一个元素时，我会在鼠标悬停时添加一些边框，以指示将要单击哪个项目：

// cy an instance of a cytoscape object
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.style('border-width','2px').style('border-color',"#AF0000");
      }
    }).on('mouseout',function(event){
      var evtTarget = event.target;
      if( evtTarget !== cy ){
        console.log("Fired");
        evtTarget.style('border-width',null).style('border-color',null);
      }
    });

所以我想要实现的是当一个 mouseout 事件碰巧从一个节点移除边框时。到目前为止，我无法弄清楚如何做到这一点，并且在上面的代码中没有发生。你知道如何从节点或边缘删除 style 属性吗？

Answer 1

在您的情况下，当 mouseout 事件发生时，只需在 0px 中设置 border-width：

// In your case just chain it with other `on methods`
cy.on('mouseout',function(event){
      var evtTarget = event.target;
      if( evtTarget !== cy ){
        console.log("Fired");
        evtTarget.style('border-width','0px);
      }
    });

据我所知，您只需将属性值重置为您在 style 部分为边或节点设置的默认值。有时只需设置一个默认值（例如，尺寸为 0px 就足以不显示）可以为最终用户实现预期的效果。

Cytoscape 在事件发生时从元素中删除样式

Cytoscape remove style from element when an event occurs

javascript

cytoscape.js