mouseOver当前元素加红框，mouseOut去掉红框，怎么做呢？

Question

下面的蹩脚的代码，会显示所有嵌套的元素的红框，而我只想当前最里层的元素加红框，就像FireBug的效果，怎么修改呢？
$('*').mouseover(function() {
    $(this).css("outline","solid 1px red");
});$('*').mouseout(function() {
    $(this).css("outline","none");
});<div>
  <p>
    <a href="#">link1</a>
    <b>blod</b>
  </p>
</div>

Answer 1

<script src="js/jquery-1.3.2.js" type="text/javascript"> </script> 
<script type="text/javascript">
window.onload=function(){ $('*').mouseover(function() { 
    $(this).css("border","solid 1px red"); return false;
}); $('*').mouseout(function() { 
    $(this).css("border","none");  return false;
}); }
</script>
<div> 
  <p> 
    <a href="#">link1 </a> 
    <b>blod </b> 
  </p> 
</div>

Answer 2

$('*').mouseover(function() { 
    $(this).css("border","solid 1px red"); return false;
}); $('*').mouseout(function() { 
    $(this).css("border","none");  return false;
});