Question

我希望在边框中将对象包裹起来以便它可见，但是，这将在WYSIWYG类型编辑器中使用，因此直接向对象添加样式会破坏它。我想将它包装在一个div中，而不是实际改变页面流的样式。

我想创建一个div然后将它相对定位，同时在其中创建四个div作为边框和位置：绝对所以它不会改变任何流程。

HTML：

<div class="bigBox">
    <div class="innerBox">

    </div>
</div>
<div class="floatingBox">

</div>

使用Jquery的JavaScript

$("div").mouseover(function(){
    $(this).wrap('<div class="displayWrapper" style="position:relative" ></div>')
    .parent()
    .append('<div class="displayNodes" style="height:1px;width:100%;position:absolute;background-color:#66f;left:0;top:0"> </div>')
    .append('<div class="displayNodes" style="width:100%;height:1px;position:absolute;background-color:#66f;left:0px;bottom:0px"></div>')
    .append('<div class="displayNodes" style="width:1px;height:100%;position:absolute;background-color:#66f;right:0;top:0"> </div>')
    .append('<div class="displayNodes" style="width:1px;height:100%;position:absolute;background-color:#66f;right:0;bottom:0" </div>')
     })
.mouseout(function()
          {
              $(".displayNodes").remove();
              $(this).unwrap();
          });

和我的CSS

.bigBox
{
    height:300px;
    position:relative; 
    background-color:black;
}
.innerBox
{
    height:25px;
    width:300px;
    position:absolute;
    background-color:green;    
    right:4px;
    top:15px;
}

.floatingBox
{
    position:absolute;
    width:300px;
    height:25px;
    background-color:red;
    top:400px;
}

我设置了一个JSFiddle：http://jsfiddle.net/94Nrb/3/

这种方法适用于通常定位的盒子，但是，当物体是绝对的或相对的时候会因为它的父母正在移动而混乱，任何人对此有什么想法？

编辑：我对小提琴有点小错误，更新为版本3应该是什么http://jsfiddle.net/94Nrb/3/

用边框包裹对象而不更改属性或流

0 个答案: