javascript - gojs 中悬停按钮的自定义样式

Question

我使用下面的代码创建了一个按钮，当用户将鼠标悬停在图表节点上时会显示该按钮。但按钮看起来很正常，没有任何样式。

我想让这个按钮类似于引导主按钮。我们如何向此悬停按钮添加自定义 css

JSFIDDLE

var nodeHoverAdornment =
  $(go.Adornment, "Spot",
    {
      background: "transparent",
      // hide the Adornment when the mouse leaves it
      mouseLeave: function(e, obj) {
        var ad = obj.part;
        ad.adornedPart.removeAdornment("mouseHover");
      }
    },
    $(go.Placeholder,
      {
        background: "transparent",  // to allow this Placeholder to be "seen" by mouse events
        isActionable: true,  // needed because this is in a temporary Layer
        click: function(e, obj) {
          var node = obj.part.adornedPart;
          node.diagram.select(node);
        }
      }),
    $("Button",
      { alignment: go.Spot.Left, alignmentFocus: go.Spot.Right },
      { click: function(e, obj) { alert("started!"); } },
      $(go.TextBlock, "Start")),
    $("Button",
      { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
      { click: function(e, obj) { alert("Stopped"); } },
      $(go.TextBlock, "Stop"))
  );

Answer 1

我已设法按如下方式设置按钮样式

    $("Button", {
      alignment: go.Spot.Bottom,
      alignmentFocus: go.Spot.Left,
      "ButtonBorder.fill": "#007bff",
      "ButtonBorder.stroke": "#007bff",
      "_buttonFillOver": "#007bff",
      "_buttonStrokeOver": "#007bff",
      cursor: "pointer",
      width: 80,
      padding: go.Margin.parse('30 0 0 5')

    },
    $(go.TextBlock, "Analyse", {
      stroke: '#fff',
      margin: 2,
    }))