在鼠标悬停上显示带有D3.js的svg外部元素？

Question

我有一个svg组，当我将鼠标悬停在它上面时，我想显示该组的其他元素。我在一个点处的代码，其中它工作在反向（例如，当我悬停g上述鼠标的附加元素是隐藏的）： It works in reverse (JSfiddle)

但是，当我改变它，以便按钮被初始化为隐藏，然后可以看到悬停它不工作了：How I actually want it.

我很抱歉，我无法使用内置的stackoverflow代码查看器，它以某种方式拒绝工作。

我认为问题在于，即使在触发hove事件之后，按钮周围的身体标记也会保留在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>`); 

这是你更新的提琴：https://jsfiddle.net/7eoamnn4/