javascript - 可调整大小的元素边框

Question

我有一个名为“content”的 div。 “内容”的所有子 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 动态添加边框。这个 fiddle 只是一个例子，我希望能够在悬停时添加边框，无论“内容”中有多少个 div

我尝试过但不明白为什么不起作用的一件事是:

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

Answer 1

它基本上是创建边框的可调整大小的 div，因为 resizble 会动态添加另一个 div(检查您的元素)...并且您的选择器适用于 #content 内的所有 div。一种方法是分别调用您需要悬停的所有元素...或者其他方式将由 resizeable 创建的所有 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 方法...

fiddle here
updated fiddle