title: jquery change div html onmouseover and onmouseout
body: <p>What I am looking for:</p>
  
  <p>I have a number of divs that are used to label columns. I want to change the text of the div from its original text to sort options like (ASC | DESC | None) when the user hovers over the div then when the user leave the div change it back to its original title. I want to create functions that can be called form the div themselves so i can reuse the code for all the column title divs.</p>
  
  <p>I have a div:</p>
  
  <pre><code>&lt;div class='headerOwner'&gt;Owner
  </code></pre>
  
  <p>I want the text of the div to change into:</p>
  
  <pre><code>&lt;div class='headerOwner'&gt;ASC | DESC | None
  </code></pre>
  
  <p>When the user hovers over the div then change back to Owner when the user leaves the div</p>
  
  <p>What I am doing is calling a function from the html div and passing the class name to the function so all the execution can happen based on what div you are hovered over. Then when the user leaves the div it returns to its original text. I am obviously doing this wrong. could someone explain clearly the steps to do inorder for this to happen properly. I am a python and php programmer so I understand code. But jquery seems to boggle my mind.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function sortShow(x)
  {
  var headText = $("."+x).html();
      $("."+x).html('&lt;a href="#"&gt;ASD&lt;/a&gt; | &lt;a href="#"&gt;DESC&lt;/a&gt;');
  }
  function sortHide(y)
  {
      $("."+y).html(headText);
  }
  
  &lt;/script&gt;
  
  &lt;div class='headerID' onmouseover='sortShow($(this).attr("class"))' onmouseout='sortHide($(this).attr("class"))'&gt;ID&lt;/div&gt;
  &lt;div class='headerOwner'&gt;Owner&lt;/div&gt;
  &lt;div class='headerQueue'&gt;Queue&lt;/div&gt;
  &lt;div class='headerSubject'&gt;Subject&lt;/div&gt;
  &lt;div class='headerType'&gt;Type&lt;/div&gt;
  &lt;div class='headerProduct'&gt;Product&lt;/div&gt;
  &lt;div class='headerHost'&gt;Host&lt;/div&gt;
  &lt;div class='headerEmail'&gt;Email&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for the help.</p>