javascriptjqueryanimationhoverjquery-hover

Is there a jQuery function for finding the hover-count of an element?

I've an image which id="logo". If someone hover on the image element, I'm hiding the image & 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.

What I'm trying to achieve: Also I've three sentences in three separate span. 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 here. Most clearly, I want to achieve this logo hover animation

$(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")
        });
    

});
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;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header">
        <div class="container">
            <div class="logo_container">
            
                <a href="index.html">
                    <img src="https://raw.githubusercontent.com/shihab0915/logo_animation/master/img/logo.png" id="logo" >
                    <span class="slogan first">first sentence</span>
                    <span class="slogan second">second sentence</span> 
                    <span class="slogan third">third sentence</span>                             
                </a>            
                
            </div>
        </div>
    </header>

Solution

  • One solution would be to show only the first .slogan on hover (using css) and have JS switch the order of the .slogans on mouseleave.

    EG:

    $(function() {
  $(".logo_container").on("mouseleave", function() {
    $("#slogans .slogan:first").appendTo($("#slogans"));
  });
});
    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;
  margin: 12px 0;
}

.logo_container:hover #logo {
  display: none;
}

.logo_container span.slogan {
  display: none;
}

.logo_container:hover span.slogan:first-of-type {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header">
  <div class="container">
    <div class="logo_container">
      <a href="index.html">
        <img src="https://raw.githubusercontent.com/shihab0915/logo_animation/master/img/logo.png" id="logo" />
        <span id="slogans">
          <span class="slogan">first sentence</span>
          <span class="slogan">second sentence</span>
          <span class="slogan">third sentence</span>
        </span>
      </a>
    </div>
  </div>
</header>