title: Is there a jQuery function for finding the hover-count of an element?
body: <p>I've an image which <code>id="logo"</code>. If someone hover on the image element, I'm hiding the image &amp; at the same time displaying a sentence. Once someone do a mouseleave, the image is back to its own place and the sentence is gone.</p>
  
  <p><strong>What I'm trying to achieve:</strong>
  Also I've three sentences in three separate <code>span</code>. If someone first time hovers on the image then I want to display the firs sentence, if someone hover over the image second time then want to display the second sentence, if hovers 3rd time then 3rd sentence. My code repo is <a href="https://github.com/shihab0915/logo_animation" rel="nofollow noreferrer">here</a>. <strong>Most clearly</strong>, I want to achieve <a href="https://www.marieforleo.com/" rel="nofollow noreferrer">this logo hover animation</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
     
      var logo_img = $(".logo_container img");
  
      
          $(logo_img).hover(function() {
              $(logo_img).css("display", "none")
              $(".logo_container span.first").css("display", "block")
          },
          
          function(){
              $(logo_img).css("display", "block")
              $(".logo_container span.first").css("display", "none")
          });
      
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{padding: 0 20px; font-family: "Gotham A", "Gotham B", sans-serif;}
  
  .logo_container a{text-decoration: none; color: #2F2F2F;}
  
  .logo_container img, .logo_container span{display: inline-block;}
  
  .logo_container img{
      max-width: 50px;
      height: auto;
  }
  
  .logo_container .slogan{font-size: 1.5rem; position: relative; top: 10px;}
  
  .logo_container span.slogan{display: none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header id="main-header"&gt;
          &lt;div class="container"&gt;
              &lt;div class="logo_container"&gt;
              
                  &lt;a href="index.html"&gt;
                      &lt;img src="https://raw.githubusercontent.com/shihab0915/logo_animation/master/img/logo.png" id="logo" &gt;
                      &lt;span class="slogan first"&gt;first sentence&lt;/span&gt;
                      &lt;span class="slogan second"&gt;second sentence&lt;/span&gt; 
                      &lt;span class="slogan third"&gt;third sentence&lt;/span&gt;                             
                  &lt;/a&gt;            
                  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>