Resizeable element border

Question

I got a div named "content". All the children divs of "content" is resizeble and gets a border on hover like so:

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

The problem is that a border around the sides of the resizeable element appears. Example: http://jsfiddle.net/hyEhh/6/

How can i give all the children of "content" a border except the borders that appears on the sidelines when you risize the div??

EDIT* I must be able to add borders dynamically with javascript/jQuery. This fiddle is just an example, i want to be able to add borders on hover regardless how many divs ther are in "content"

One thing that I have tried that I don't understand why didn't work is this:

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

Answer 1

it is basicaly the resizeable div that is creating the border since resizble adds another div to it dynamically (inspect your element) ...and your selector is for all the div inside #content. one way to do this is call all your element that you need hover sepearately... or other way leave all the div that was created by resizeable in your selector....

try this

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

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

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

and use hover() instead of two seperate event handler... hover is shorthand for mouseenter and mouseleave

updated

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

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

this is without selecting the div that resized created dynamically.. nothing needs to be added in your HTML simply use the jquery not method...

fiddle here
updated fiddle