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

标签 javascript jquery html d3.js svg

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

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

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

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

最佳答案

您必须设置 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/

关于javascript - 在鼠标悬停时使用 D3.js 显示 svg 外来元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46112309/

相关文章:

javascript - Ajax - 从 PHP 加载表后调用 AJAX 函数

javascript - 如何使用 javascript 为 SVG 文本元素提供固定的高度和宽度?

javascript - 使用递归检索属性 'x' 内所有对象的属性 'y'

html - 在 mozilla 中缩放单选按钮和复选框

php - 从不同的数据库表获取搜索结果并显示它们?

javascript - 对于 Prisma Client 连接查询,是否可以将深度嵌套的字段移动到结果的顶层?

javascript - 调整悬停时内容的垂直对齐方式

javascript - 删除具有特定内容的表 tr

php - http请求AJAX

javascript - jquery复制没有子内容的html内容