Существует ли функция jQuery для нахождения счетчика при наведении на элемент? - PullRequest
Новая
       51

Существует ли функция jQuery для нахождения счетчика при наведении на элемент?

0 голосов
/ 10 января 2020

У меня есть изображение, которое id="logo". Если кто-то наводит курсор на элемент изображения, я скрываю изображение и одновременно отображаю предложение. Когда кто-то делает отпуск мышью, изображение возвращается на свое место, и предложение исчезает.

Чего я пытаюсь достичь: Также у меня есть три предложения в трех отдельных span. Если кто-то в первый раз наводит курсор на изображение, то я хочу отобразить первое предложение, если кто-то наводит курсор на изображение во второй раз, то хочу отобразить второе предложение, если оно находится в третьем, а затем в третьем предложении. Мой код репо здесь . Наиболее четко , я хочу добиться этой вот go анимации при наведении 

$(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>

Ответы [ 2 ]

1 голос
/ 10 января 2020

Одним из решений было бы отображение только первого .slogan при наведении курсора (с использованием css) и JS для переключения порядка .slogan s при отпускании мыши.

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>
1 голос
/ 10 января 2020

Вот что я считаю довольно простым подходом к проблеме. Я только опубликовал 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>
...