Question

I would like to create a script that will create a border around specific element when i hover on it

the code i attempted this with..

(function(){
  $(document.body).each(function(){
$(this).hover(
    function(){
        $(this).css('border','1px solid blue');

    },
    function(){
        $(this).css('border','none');
    }
)
  })
})()

any help will be much appreciated

Answer 1

Using delegate just attach the mouseover/mouseout event to body tag instead of attaching it to all the elements on the page. Using this we can control the css.

Note: This method is attaching only a single event handler on body element.

$(function(){
  $('body').delegate("*", 'mouseover', function(e){
                $(this).css('border','1px solid blue');
                e.stopPropagation();

            }).delegate("*", 'mouseout', function(e){
                $(this).css('border','none');
                e.stopPropagation();
            }
        );

});

Working demo