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

Question

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

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

Answer 1

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

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

您基本上创建了很多 div，每个代表一个“像素”。您在 :hover 上更改 divs' background-color，并在 之后保持 background-color :hover 状态使用(又一个滥用)transition 技巧(伪无限延迟)消失了。

这是一个演示:little link .尝试将鼠标悬停在顶部以查看移动鼠标时绘制的“面包屑”。

我再次强调，这完全是一种滥用，不应在任何实际应用中使用。

这可以扩展为使用 CSS 创建一个小型绘画程序。我做了一个小玩意来说明:another little link (尝试通过单击并移动鼠标来绘制!)

底线:使用 JavaScript——在这种情况下这是唯一的选择(没有 JavaScript 就无法控制 canvas)。