javascript - 是否可以在 CSS3 中的元素之间创建线？

Question

我在我创建的应用程序中使用 jQuery Draggable，我想知道是否有可能以某种方式在网站上的对话框和元素之间创建一条线？我希望它在拖动时跟随可拖动框。

我正在寻找 CSS/HTML 方式而不是 jQuery/JS 方式。如果没有办法使用纯 CSS3/HTML5 创建它，那么我将从 JS 方法开始 - 只是想知道 :)

Answer 1

基本上：不，没有办法仅使用 CSS 来实现这一点。

但是，如果这被视为一个 CSS 谜题（我建议您不要在任何实际应用程序中使用以下解决方案），您可能能够实现类似的效果。同样，这将完全滥用 HTML 和 CSS。

你基本上创造了很多divs，每个代表一个“像素”。您更改divs' background-coloron ，并使用（又一个滥用的）技巧（伪无限延迟）:hover保持background-color后状态消失。:hovertransition

这是一个演示：小链接。尝试将鼠标悬停在顶部以查看移动鼠标时绘制的“面包屑”。

我再次夸大这完全是滥用，不应该在任何实际应用程序中使用。

这可以扩展为使用 CSS 创建一个小型绘画程序。我做了一个小片段来说明：另一个小链接（尝试通过单击和移动鼠标来绘制！）

底线：使用 JavaScript——在这种情况下，这是唯一的手段（没有 JavaScript，你无法控制 a canvas）。