是否有 jQuery 函数用于查找元素的悬停次数？

Question

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

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

Answer 1

这是我认为解决问题的一种相当简单的方法。我只发布了 JS 和 HTML，因为我没有更改任何 CSS。这种方法只是更改文本本身，而不是 showing/hiding 个不同的元素。

Code Pen

JS:

var messagesObj = {};

$(document).ready(function(){

  messagesObj.messages = ['message one', 'message two', 'message three'];

  var logo_img = $(".logo_container img");

  $(logo_img).mouseover(function() {
    messagesObj.current = messagesObj.messages.pop();
    $('.message').text(messagesObj.current);
  });

  $(logo_img).mouseout(function() {
      messagesObj.messages.unshift(messagesObj.current);
    $('.message').text('');
  });
});

HTML:

<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" >                       
                </a>            
                <span class="message"></span> 
            </div>
        </div>
    </header>

Answer 2

一个解决方案是在悬停时仅显示第一个 .slogan（使用 css）并让 JS 在鼠标离开时切换 .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>

是否有 jQuery 函数用于查找元素的悬停次数？

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

javascript

jquery

animation

hover

jquery-hover