title: Hover effect stays until cursor move
body: <p>Go to full page. Click on the "See other" button. The content will expand. Then click again on the "Show even more" button. The content will expand again.</p>
  
  <p>Now.</p>
  
  <p>Move your cursor over the "Show less" button. Don't move it. Then click on the button. The content will be hidden; the cursor will stay on its place but the hover effect  will also stay on the button until cursor move.
  What is the solution to this?</p>
  
  <p>I've made a little animation to show you what I mean. On step #4 the hover effect should disappear because the cursor isn't on the button.</p>
  
  <p><a href="http://gifmaker.cc/PlayGIFAnimation.php?folder=20151109170rTe1miUUTXJiowKrrP4IF&amp;file=output_KNKsQu.gif" rel="nofollow">http://gifmaker.cc/PlayGIFAnimation.php?folder=20151109170rTe1miUUTXJiowKrrP4IF&amp;file=output_KNKsQu.gif</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
    var list = $(".partners__wrap .partner");
    var numToShow = 1;
    var button = $(".partners__button__a");
    var numInList = list.length;
    var isShowing = true;
  
    list.hide();
    if (numInList &gt; numToShow) {
      button.show();
    }
    list.slice(0, numToShow).show();
    button.click(function() {
      var showing = list.filter(':visible').length;
      if (isShowing) {
        list.slice(showing - 1, showing + numToShow).fadeIn(500);
        onFadeComplete();
      } else {
        list.slice(showing - numToShow, numInList).fadeOut(500, onFadeComplete);
  
      }
  
    });
  
    function onFadeComplete() {
  
      var nowShowing = list.filter(':visible').length;
  
      if (nowShowing == numInList &amp;&amp; isShowing) {
        isShowing = false;
        button.text("Show less");
      } else if (isShowing) {
        button.text("Show even more");
  
      }
  
      if (nowShowing == numToShow) {
        button.text("See other");
        isShowing = true;
      }
  
    }
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.partners__button {
    text-align: center;
    padding-top: 16px;
  }
  .partners__button__a {
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    font-family: Arial;
    color: #ff4e50;
    font-size: 14px;
    background: #fff;
    padding: 10px 26px 10px 26px;
    text-decoration: none;
    border: 2px solid #ff4e50;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
  .partners__button__a:hover {
    background-color: #3cb0fd;
    border-color: #3cb0fd;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="partners"&gt;
    &lt;h2 class="partners__h2" id="find"&gt;Headline&lt;/h2&gt;
  
    &lt;div class="partners__wrap"&gt;
      &lt;div class="partner__1 partner"&gt;
        &lt;div class="partner__pic__wrap"&gt;
          &lt;div class="partner__1__icon partner__icon"&gt;&lt;/div&gt;
          &lt;a class="partner__1__pic partner__pic__hover" href="#"&gt;&lt;/a&gt;
  
        &lt;/div&gt;
        &lt;div class="partner__wrap"&gt;
          &lt;h4 class="partner__name"&gt;Title&lt;/h4&gt;
  
          &lt;p class="partner__description"&gt;Text. And Text.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="partner__2 partner"&gt;
        &lt;div class="partner__pic__wrap"&gt;
          &lt;div class="partner__2__icon partner__icon"&gt;&lt;/div&gt;
          &lt;a class="partner__2__pic partner__pic__hover" href="#"&gt;&lt;/a&gt;
  
        &lt;/div&gt;
        &lt;div class="partner__wrap"&gt;
          &lt;h4 class="partner__name"&gt;Title&lt;/h4&gt;
  
          &lt;p class="partner__description"&gt;Text. And Text.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="partner__3 partner"&gt;
        &lt;div class="partner__pic__wrap"&gt;
          &lt;div class="partner__3__icon partner__icon"&gt;&lt;/div&gt;
          &lt;a class="partner__3__pic partner__pic__hover" href="#"&gt;&lt;/a&gt;
  
        &lt;/div&gt;
        &lt;div class="partner_wrap"&gt;
          &lt;h4 class="partner__name"&gt;Title&lt;/h4&gt;
  
          &lt;p class="partner__description"&gt;Text. And Text.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="partners__button"&gt;
    &lt;button class="partners__button__a"&gt;See other&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>