jQuery Event logic/order of operations
<p>I'm missing a final 1% of a footer element I'm working on. </p>

<p>The logic of what I want to do should be obvious:  I want to have the word EXPAND showing when I hover over the footer, and I want the word HIDE showing when the footer is expanded.</p>

<p>I have everything working except the HIDE part when the footer is expanded—when I hover away from the footer block, it shows the word EXPAND again. I want to stop that hover event from occurring. Or at least I think that's what I want to do. </p>

<p>=><a href="http://jsfiddle.net/GTwuC/2/" rel="nofollow">JSFiddle</a> will show you what I'm talking about.</p>

<p>Appreciate the help,</p>

<p>Terry </p>

<pre><code>$(document).ready(function() {
  $("#shows").click(function () {
      $('footer').toggleClass("highlight");
      $('#shows').text('Hide');
    });
    $("footer").hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );    
});
</code></pre>
