Question

我有一个名为“内容”的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');
    }

Answer 1

基本上是可调整大小的div正在创建边框，因为resizble动态添加另一个div（检查你的元素）...而你的选择器是#content内的所有div。一种方法是调用你需要的所有元素单独悬停...或者其他方式保留你的选择器中可调整大小创建的所有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');
    });

这是没有选择动态创建的res大小的div。在HTML中不需要添加任何内容只需使用jquery not方法......

fiddle here
updated fiddle

Answer 2

为您想要边框的每个元素添加一个公共类名。

<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');
});

Answer 3

有几种方法可以做到这一点。第一种方法是为你的孩子分配一个课程并像这样称呼，

<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;
}

可调整大小的元素边框

3 个答案: