Wie Klasse zu Element hinzufügen, wenn Sie den Mauszeiger halten, aber wenn Sie die Klasse bleiben bleiben

Question

Ich kann das Problem nicht gelöst, wenn Sie Elemente Hover sie aktive Klasse hinzufügen muss, aber wenn Sie auf etwas anderes (einen anderen Abschnitt und usw.) Diese Klasse muss auf dem letzten Element bleiben, auf dem Sie schwebten. Der erste Block muss als Standardzustand aktiv sein.

<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

Verwenden mouseenter & mouseleave statt 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>