调整元素边框的大小

Resizeable element border

本文关键字：边框 元素 调整      更新时间：2023-09-26

我得到了一个名为"content"的div。"content"的所有子div都是可调整大小的，并且在悬停时有一个边框，如下所示:

$('#content div').resizable({});
$('#content div').mouseleave(function(){
$(this).removeClass('borderClass');
});
$('#content div').mouseenter(function(){
$(this).addClass('borderClass');
});

问题是在重新调整大小的元素周围出现了边框。例子:http://jsfiddle.net/hyEhh/6/

我怎么能给所有的"内容"的孩子一个边界除了边界出现在场外，当你看到div??

编辑*我必须能够添加与javascript/jQuery动态边界。这只是一个例子，我想能够添加边框悬停不管有多少div在"内容"

我试过的一件事，我不明白为什么不工作是这个:

if(document.body.style.cursor = "n-resize") {
        $(this).removeClass('borderClass');
    }

它基本上是创建边界的可调整大小的div，因为resizble动态地添加了另一个div(检查您的元素)…你的选择器是用于#content内的所有div。一种方法是将所有需要的元素分别调用为hover…或者其他方式，留下所有在选择器中通过调整大小创建的div ....

试试这个

    $('#content div').resizable({});
$('div#test,div#test2').hover(function(){
     $(this).addClass('borderClass');
    },function(){
         $(this).removeClass('borderClass');
    });

和使用hover()代替两个独立的事件处理程序…hover是mouseenter和mouseleave的简写

 $('#content div:not(".ui-resizable-handle")').hover(function(){
        $(this).addClass('borderClass');
    },function(){
        $(this).removeClass('borderClass');
    });

这是在不选择动态创建的div调整大小的情况下。不需要在HTML中添加任何东西，只需使用jquery not方法…

小提琴在这里
更新小提琴

为每个需要边框的元素添加一个通用的类名。

<div id=content>
    <div id=test>BLABLA
        <div class="child" id="test2">lala</div>
    </div>
</div>

然后匹配你在jQuery中使用的CSS选择器:

$('#content div').resizable({});
$('#content div.child').mouseleave(function(){
    $(this).removeClass('borderClass');
});
$('#content div.child').mouseenter(function(){
    $(this).addClass('borderClass');
});

有几种方法可以做到这一点。第一种方法是给你的孩子分配一个类，并像这样命名它

<div id=content>
    <div id=test>BLABLA
        <div class="className" id="test2">lala</div>
    </div>
</div>
$('#content div').resizable({});
$('#content div').mouseleave(function(){
    $('.className').removeClass('borderClass');
});
$('#content div').mouseenter(function(){
    $('.className').addClass('borderClass');
});

第二步是搜索父div的子元素。

$('#content div').resizable({});
$('#content div').mouseleave(function(){
    $(this).children().removeClass('borderClass');
});
$('#content div').mouseenter(function(){
    $(this).children().addClass('borderClass');
});

如果你想为你悬停在上面的单个可调整大小的元素添加边框，这是非常简单的。您可以像前面提到的那样为元素分配一个类，使用这个类选择它们，并将click事件绑定到它。

<div id=content>
    <div id=test>BLABLA
        <div class="className">lala</div>
        <div class="className">lala</div>
        <div class="className">lala</div>
        <div class="className">lala</div>
    </div>
</div>
$('.className').hover(function(){
    $(this).toggleClass('borderClass');
});

注意，我在这里使用了toggleclass方法，因为它将获得与在单独的行中添加和删除类相同的结果。

要实现只有上下边框你的CSS类应该看起来像

.borderClass
{
border-top:2px solid #000000;
border-right:none;
border-bottom:2px solid #000000;
border-left:none;
}
相关文章：