javascript - How to overlay multiple instances of cytoscape.js over each other

Question

I have multiple cytoscape.js instances occupying the same area. User can change the "active" graph in the area from a menu in the sidebar. Inactive graphs are hidden with css. As the next step I would like to overlay a semi-transparent graph over the "active" graph when user hovers on a inactive graph list item.

I tried setting different z-indexes for canvas layers dynamically but it doesn't seem to work.

.show-overlaying-graph canvas[data-id="layer0-selectbox"] {
  z-index: 4;
}

.show-overlaying-graph canvas[data-id="layer1-drag"] {
  z-index: 5;
}

.show-overlaying-graph canvas[data-id="layer2-node"] {
  z-index: 6;
}

How would I transparently overlay a cytoscape.js graph over another graph?

Answer 1

等待大神答复