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

Question

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

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

Answer 1

基本上:不,没有办法只使用CSS实现这一点.

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

你基本上创造了很多divs,每个代表一个'像素'.你改变divs' background-coloron :hover,并使用(又一个滥用)技巧(伪无限延迟)保持background-color后:hover状态消失transition.

这是一个演示:小链接.尝试将鼠标悬停在顶部,以查看移动鼠标时绘制的"面包屑".

我再次夸大这是完全滥用的,不应该在任何实际应用中使用.

这可以扩展为使用CSS创建一个小的绘画程序.我做了一点点说明:另一个小链接(通过点击并移动鼠标来尝试绘图!)

底线:使用JavaScript - 在这种情况下它是唯一的手段(canvas没有JavaScript 就无法控制).