title: Keep image hover button when click using jQuery
body: <p>I have the following code to provide a hover effect when I hover over a button image:</p>
  
  <pre><code> $("img.hoverImage")
      .mouseover(function () {
          var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
          $(this).attr("src", src);
      })
      .mouseout(function () {
          var src = $(this).attr("src").replace("_hover", "");
          $(this).attr("src", src);
      });
  </code></pre>
  
  <p>This works great.  I now have an additional requirement:</p>
  
  <p>I have three buttons in a row that all have class="hoverImage". </p>
  
  <pre><code>&lt;a class="imageLink" href=""&gt;&lt;img class="hoverImage" src="/Content/Images/1.png"/&gt;&lt;/a&gt;
  &lt;a class="imageLink" href=""&gt;&lt;img class="hoverImage" src="/Content/Images/2.png"/&gt;&lt;/a&gt;
  &lt;a class="imageLink" href=""&gt;&lt;img class="hoverImage" src="/Content/Images/3.png"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I still want to keep this hover effect but now I also want to change it so when I click on an image, it keeps the hover image shown (even when I mouse out of that image).  When I click on another button, it should remove the hover from the other buttons.</p>
  
  <p><strong>NOTE</strong>: that clicking on the image links do NOT redirect to a new page (they just call some ajax from a js file)</p>
  
  <p>What is the best way to extend the code below to support this with jQuery?  It seems like I need to disable the mouseout handler after the item is clicked but I am trying to avoid having a complicated solution.</p>