Question

我无法显示任何笔，我只能描述该错误。这是我的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以查看是否有任何更改，但是没有更改。有任何想法或解决方法吗？

Answer 1

我尝试了不同的元素。

    $('.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");
});

Answer 2

您是否尝试过以下代码：

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

Answer 3

    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/

jquery.hover（）添加类并立即将其删除

3 个答案: