Highlighting an element as it is hovered over (like inspect element in FireBug)

Highlighting an element as it is hovered over (like inspect element in FireBug)

I'm trying to get the same functionality that firebug has in it's inspect element in where as you mouseover things it hightlights it and when you click an element it unbinds both mouseover and click
  1. .one('click', function(){unbind...})
Then I want to display the absolute path to that element like: html > body > ul > ul > li > ul > li > a > font

Anyway heres my basic code so far

  1. (function($)
  2. {
  3.     $('<style type="text/css">.qwertymk{border: 1px black solid}</style>')
  4.     .appendTo('head');
  5.    
  6.     function aimedAt(evt)
  7.     {
  8.         var $targ = $(evt.originalEvent.explicitOriginalTarget);  //This worked when it was a click event
  9.         if ($targ[0].nodeType == Node.TEXT_NODE)//jQuery considers a TEXT_NODE
  10.             $targ = $targ.parent();            //just a property of it's parent
  11.         return $targ;
  12.     }

  14.     /*$(document).bind('click', function(e)
  15.     {
  16.         var $el = aimedAt(e);

  18.         $el.css('border', '1px black solid');

  20.         console.log($el);
  21.         e.preventDefault();
  22.     });*/
  23.     $(document).hover(function(e)
  24.     {
  25.         var $el = aimedAt(e);
  26.         $el.toggleClass('qwertymk');
  27.     });
  28.     /*$(document).one('click', function()
  29.     {

  31.     });*/
  32. })(jQuery)