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

【问题标题】：Is there a jQuery function for finding the hover-count of an element?是否有用于查找元素悬停计数的 jQuery 函数？
【发布时间】：2020-01-10 17:28:45
【问题描述】：

我有一张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>

【问题讨论】：

我怀疑这里有一个 jQuery 特定的东西可以帮助你。似乎您只需要一些基本的 JS 来跟踪悬停计数。您已经完成了悬停事件处理，现在您只需要检查计数并显示适当的消息。更简单的是，我会考虑使用弹出/推送方法。只需将每条消息放在一个数组中，悬停显示弹出的消息，然后将其推回数组。这样您就不必跟踪任何内容。
编辑我之前的评论：我应该说pop/unshift（弹出最后一个并将其取消移位到数组的开头）
您可以在每个悬停事件上增加一个计数器，并根据除以 3 的余数显示 3 个不同的 <span> 元素之一：(counter % 3)。
试图弄清楚你所说的。谢谢@BradEvans Romen

标签： javascript jquery animation hover jquery-hover

【解决方案1】：

一种解决方案是在悬停时仅显示第一个 .slogan（使用 css），并让 JS 在 mouseleave 时切换 .slogans 的顺序。

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>

【讨论】：

经典 SO。以某种方式在 DOM 中移动东西总比不移动好？好啦

【解决方案2】：

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

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>

【讨论】：