jquery.hover () добавляет класс и немедленно удаляет его - PullRequest
Новая
       56

jquery.hover () добавляет класс и немедленно удаляет его

0 голосов
/ 15 февраля 2019

Я не могу показать ручку, я могу просто описать ошибку.Это мой javascript: 

$(".vetrina-deluxe-info-container-front").hover(function() {
  $(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}, function() {
  $(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});

На первом .hover() на любом из этих элементов класс добавляется и немедленно удаляется.Со второго раза при наведении курсора все работает отлично.

Я также пробовал этот код: 

$(".vetrina-deluxe-info-container-front").mouseover(function() {
  $(this).closest('.js-in-viewport-hook').addClass("in-viewport");
});

$(".vetrina-deluxe-info-container-front").mouseleave(function() {
  $(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});

Он работает точно так же.Я также пытался изменить .hover() div, чтобы увидеть, если что-то изменится, но нет.Любые идеи или обходной путь?

Ответы [ 3 ]

0 голосов
/ 15 февраля 2019

Я пробовал разные элементы. 

    $('.test').mouseover(function(e){
        console.log('ON');
        $(this).removeClass('blue');
        $(this).addClass('red');
    }).mouseout(function(e){
               $(this).removeClass('red');
       console.log('OUT');
       $(this).addClass('blue');
    });
    $('#test').mouseenter(function(e){
        console.log('IN');
        $(this).removeClass('red');
        $(this).addClass('yellow');
    }).mouseleave(function(e){
       $(this).removeClass('yellow');
                  $(this).removeClass('yellow');
       console.log('OUT');
       $(this).addClass('red');
    });
.test{
    width: 60%;
    height: 60%;
    margin: 10px auto;
    }
    
    .yellow{
    background-color: yellow;
    }
    .red{
    background-color: red;
    }
    
    .blue{
    background-color: blue;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <div class="test yellow">
    <p>TEST</p>
  </div>
</html>

Ваш код будет таким: 

$(".vetrina-deluxe-info-container-front").mouseenter(function() {
  $(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}).mouseleave(function() {
  $(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
0 голосов
/ 15 февраля 2019 
    please check this i have added class on hover then i remove the class name when not hovered
        <p>hover me.</p>
 <script>
   $("p").hover(function(){
       $(this).css({"color":"blue"}).addClass('color-blue');
    }, function(){
       $("p").css({"color":"red"}).removeClass('color-blue');
    });
 </script>

https://jsfiddle.net/gapqc5wb/

0 голосов
/ 15 февраля 2019

Вы пробовали этот код: 

$(".vetrina-deluxe-info-container-front").hover(function() {
  $(this).closest('.js-in-viewport-hook').toggleClass("in-viewport");
});
...