在鼠标悬停时用D3.js显示svg外来元素?

时间:2017-09-08 08:45:05

标签: javascript jquery html d3.js svg

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

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

对不起,我无法使用内置的stackoverflow代码查看器,它以某种方式拒绝工作。

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

1 个答案:

答案 0 :(得分: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/