Using jQuery to "highlight" content under cursor
<p>I'm trying to write some jQuery code that will highlight the element the cursor is currently hovering over by adding a border around it. Here is the code I have so far:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Hover Test&lt;/title&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(function() {
     $("*:not(html, head, body)").hover( function () {
      $(this).css("border", "2px solid purple");
     }, 
     function () {
      $(this).css("border", "none");
     }).click( function () {
      alert($(this).html());
     });
    });
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div&gt;
    &lt;p&gt;This is paragraph one&lt;/p&gt;
    &lt;p&gt;This is paragraph two&lt;/p&gt;
&lt;/div&gt;
&lt;span id="curtag"&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The problem is when I hover over something like a paragraph in the example below it also highlights the parent tag in this case the div. Additionally, when I click on the paragraph it gives me the html of the p and then the html of the div, however, I only want the html in the p tag. Any suggestions on how to fix this?</p>
