javascript - 是否有一个 jQuery 函数可以查找元素的悬停计数？

Question

我有一个 id="logo" 的图像。如果有人将鼠标悬停在图像元素上，我会隐藏图像并同时显示句子。一旦有人做了鼠标离开，图像就会回到原来的位置，句子就会消失。

我想要实现的目标: 另外，我在三个单独的 span 中包含三个句子。如果有人第一次将鼠标悬停在图像上，那么我想显示第一句话，如果有人第二次将鼠标悬停在图像上，那么我想显示第二句话，如果第三次悬停，则显示第三句话。我的代码仓库是 here 。 最清楚，我想实现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>

Answer 1

一种解决方案是在悬停时仅显示第一个 .slogan(使用 CSS)，并让 JS 在 mouseleave 上切换 .slogan 的顺序。

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>