javascript - 在鼠标悬停时使用 D3.js 显示 svg 外来元素？

Question

我有一个 svg 组，当我将鼠标悬停在它上面时，我想显示该组的其他元素。我将代码放在它确实可以反向工作的位置(例如，当我将鼠标悬停在 g 上方时，附加元素被隐藏): It works in reverse (JSfiddle)

但是当我更改它以便按钮最初隐藏然后在悬停时可见时它不再起作用:How I actually want it.

很抱歉，我无法使用内置的 stackoverflow 代码查看器，它无法正常工作。

我认为问题是即使在触发 hove 事件之后，按钮周围的 body 标签仍保持 opacity: 0。在浏览器 Inspector 中很容易观察到。

Answer 1

您必须设置 opacity在<button>元素本身:

.html(`<button style="color: #000000; background-color: #FF8C00; 
    border: 1px solid #888888; opacity:0" class="connector-button">
    <i class="fa fa-arrows-v" aria-hidden="true"></i></button>`);

这是您更新的 fiddle :https://jsfiddle.net/7eoamnn4/