is there a way to make it so that each element the mouse movesover, the element is highlighted with red border? a bit like what you see on firebug....

however i need this to be implemented through something like ajax, jquery...etc

I honestly don't know how you'd do it automatically. The only way I could see doing this is by defining all the different tags that you'd use in a css file. All you'd have to do in a css file:


div:hover{
border: 1px solid red;
}
span:hover{
border: 1px solid red;
}
li:hover{
border: 1px solid red;
}
...


I think that'd be the best way to do it, but I could be mistaken.

If I understand you correctly, and if you really want to do this in jquery, you'll probably want something like


$('div').mouseover(function() {
$(this).css({'border' : '1px solid #f00'});
});
$('div').mouseout(function() {
$(this).css({'border' : '0px solid #000'});
});


Not really the best, and the padding will get messed up when the border displays... but it sorta works ;)

This morning I had something like this done up, but never had a chance to test or post it. It still hasn't been tested.


$(document).ready(function() {
$('*').hover(function() {
$(this).addClass('hoverborder');
}, function() {
$(this).removeClass('hoverborder');
});
});

Well if its a Anchor Link you can use CSS:
.softlinks a:link, .softlinks a:visited, .softlinks a:active{
/*GENERAL CSS*/
}
.softlinks a:hover{border-bottom:1px solid red;}

Make use of CSS and JS for this. You will have to use js to trigger the CSS.