javascript - JSPlumb 在悬停时显示连接标签

标签 javascript css hover jsplumb

我正在使用 JSPlumb 连接一堆 block ,我可以使用以下方法为连接设置标签:

JSPLUMB_INSTANCE.bind("connection", function (info) {
    info.connection.getOverlay("label").setLabel("w="+width+"<br>p="+pipelining);
});

这样标签在连接上总是可见的。 有没有办法让标签只出现在鼠标悬停时?

最佳答案

我遇到了与您描述的相同的挑战,我的解决方案如下所示:

function setConnectionLabel(connection, label) {
    connection.bind("mouseenter", function(conn) {
        conn.addOverlay(["Label", { label: label, location:0.5, id: "connLabel"} ]);
    }); 

    connection.bind("mouseout", function(conn) {
        conn.removeOverlay("connLabel");
    });
}

所以在你的情况下,这应该可以解决问题:

JSPLUMB_INSTANCE.bind("connection", function (info) {
    setConnectionLabel(info.connection, "Labeltext");
});

让我知道它是否适合您,干杯!

更新:使用“mouseover”代替“mouseenter”
New Documentation

关于javascript - JSPlumb 在悬停时显示连接标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24598529/

相关文章:

css - IE-7 Z-index问题

javascript - 悬停时在 div 中的两个范围之间切换

javascript - 为什么 .is (":hover") 不起作用?

移动设备上的 CSS 悬停

javascript - 为什么在 HTML 中调用 .js 文件时我的函数无法运行

javascript - JavaScript 新手 : Can I pass a List into this function and have it still work?

javascript - 在将 "Table"转换为 "Div"时处理 rowspan 和 colspan

CSS3 背景图像不会垂直拉伸(stretch)

html - div 中的 [hidden] 和使用 ng-show 有什么区别?

javascript - 使用图像交换器进行递归