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

时间:2012-09-23 12:20:29

标签: javascript html css html5 css3

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

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

enter image description here

1 个答案:

答案 0 :(得分:10)

基本上:不,无法使用CSS实现此目的。

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

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

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

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

这可以扩展为使用CSS创建一个小的绘画程序。我做了一点点说明:another little link(尝试通过点击并移动鼠标进行绘图!)

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