1

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

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

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

3 回答 3

1

它基本上是创建边框的可调整大小的 div，因为 resizble 会动态地向它添加另一个 div（检查您的元素）......并且您的选择器适用于里面的所有 div #content。一种方法是调用所有需要单独悬停的元素...或其他方式将所有由可调整大小创建的 div 保留在选择器中...。

试试这个

    $('#content div').resizable({});

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

         $(this).removeClass('borderClass');
    });

并使用hover()而不是两个单独的事件处理程序...悬停是mouseenter和的简写mouseleave

更新

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

        $(this).removeClass('borderClass');
    });

这是没有选择动态创建的调整大小的 div.. 无需在 HTML 中添加任何内容，只需使用 jquerynot方法...

小提琴在这里
更新了小提琴

于 2013-03-28T16:53:58.293 回答
0

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

<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');
});
于 2013-03-28T16:49:39.037 回答
0

有几种方法可以做到这一点。第一种方法是给你的孩子分配一个班级并这样称呼它，

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

如果您只想为悬停在其上的单个可调整大小的元素添加边框，则非常简单。您可以如上所述为元素分配一个类，使用此类选择它们，并将单击事件绑定到它。

<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;
}
于 2013-03-28T16:49:59.713 回答