title: Change button text on mouseover by jQuery
body: <p>If the button text is "followed" and the user hovers over it I want the text to change to "unfollow" and change back to "followed" once the user stops hovering. </p>
  
  <p>Button:</p>
  
  <pre><code>{%if follow%}
  &lt;button type="submit" id="status" class="button" value="True"&gt;&lt;span&gt;followed&lt;/span&gt;&lt;/button&gt;
  
  {%else%}
  &lt;button type="submit" id="status" class="button" value="False"&gt;&lt;span&gt;follow&lt;/span&gt;&lt;/button&gt;
  
  {%endif%}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $(".button").click(function() {
          var status = $("#status").val();
          var course = $("#course").html()
  
          //SECTION THAT I'M HAVING TROUBLE WITH
          if ($(".button span").html() == "followed") {
              $(".button").mouseover(function() {
              $(".button span").html() = "unfollow";
              }
          }
  
          $.ajax({
              type: "POST",
              url: "/follow",
              data: 'status=' + status + "&amp;course=" + course,
              success: function() {
  $(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
  $(".button").val($(".button").val() == 'True' ? 'False' : 'True');
  }
          });
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I run this I get</p>
  
  <pre><code>405 Method Not Allowed
  
  The method POST is not allowed for this resource. 
  </code></pre>
  
  <p>But when I remove the mouseover code it works. What's wrong with the mouseover code?</p>
  
  <p>Edit:
  Updated jQuery that now works, outside of onclick code, with mouseout:</p>
  
  <pre><code>if ($(".button span").html() == "followed") {
  $(".button").mouseover(function() {
      $(".button span").html("unfollow");
  });
  $(".button").mouseout(function() {
      $(".button span").html("followed");
  });
  }
  </code></pre>
  
  <p>Edit:
  Actually, with the code above, if the button is "followed" and I click it, the button text remains "followed". I think this is because the mouseout function is overriding the ajax success function that changes it to "follow". How do I override the "followed" mouseout function once I click the button?</p>