javascript - 动态地，在具有指定类名 (jQuery) 的每个元素(div、图像、跨度等)上添加重叠的 div

Question

我想为选定的 div 编写一个具有一些视觉效果的 jQuery 插件。 集成插件看起来像这样:

$('.myclass').mypluginfunction();

从视觉上看，它是整个元素上的透明 div，具有移动背景。

是否可以在不破坏 float div 的情况下动态添加 div？

我知道解决方案是向具有更大 z-index 的 div 添加绝对位置。

Answer 1

您甚至不需要修改 z-index。源中较低的元素将覆盖它之前的内容。将您的元素设置为 position: relative 并附加一个宽度和高度设置为 100% 的绝对定位的 div - 这将有效地覆盖它。

自己安装 Chrome(或 Firebug)并使用 $.append()在控制台中:

$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>');

这将相对定位您网站上的每个元素，然后附加一个具有红色背景的绝对定位的 div。您应该会看到网站上的每个元素都被它覆盖了。

当然这会爆炸，一点点，但它让您了解使用此技术有多么容易。