あなたがマウスを置いたときにマウスを置いたときにマウスを置くと、クラスに要素を追加する方法

Question

アクティブなクラスを追加する必要がありますが、何か他のセクションに移動したときに問題を解決できませんこのクラスは、あなたが抱いていた最後の要素にとどまらなければなりません。最初のブロックはデフォルト状態としてアクティブでなければなりません。

<div class="work-elem"> 
<div class="work-elem"> 
<div class="work-elem"> 
<div class="work-elem"> 

$(".work-elem:first").addClass("active"); 
    $(".work-elem").each(function() { 
     $(".work-elem").hover(function() { 
      $(this).removeClass("active"); 
      $(this).addClass("active"); 
     }, 
     function() { 
      $(this).removeClass("active"); 
     }); 
    }); 

Answer 1

$(".work-elem").mouseover(function() { 
 
    $(".work-elem").removeClass("active"); 
 
    $(this).addClass("active"); 
 

 
});

div { 
 
    width: 20px; 
 
} 
 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="work-elem active">1111</div> 
 
<div class="work-elem">2222</div> 
 
<div class="work-elem">3333</div> 
 
<div class="work-elem">4444</div>

Answer 2

使用mouseenter & mouseleave代わりのhover：

$(".work-elem:first").addClass("active"); 
 
    $(".work-elem").each(function() { 
 
     $(".work-elem").mouseenter(function() { 
 
      $(this).removeClass("active"); 
 
      $(this).addClass("active"); 
 
     }).mouseleave(function(){ 
 
       $(this).removeClass("active"); 
 
     }); 
 
    });

.active{ 
 
    color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="work-elem">What about</span>