Question

I have a set of tabs and want to add mouseover functionality to them. I don’t want this functionality to be applied to .active.

Markup:

<ul>
    <div class='tab'>my tab</div>
    <div class='tab' data-id='1'>your tab</div>
</ul>

<script>
  $('.tab').on('click',function(){
     $(this).addClass('active');
  });
</script>

I have tried this:

$('.tab').not('.active').on('mouseover', function(){

and

$('.tab:not(.active)').on('mouseover', function(){

But neither of these work. How would I exclude that active from this functionality?

Answer 1

one possible issue is that I’m adding the active via addClass in response to a click in another section. Would the syntax above handle this?

That is the issue. When adding the mouseover event on load, the active class isn’t present, so the .not() doesn’t exclude anything. Instead you need to check for the class inside the handler itself.

Try this:

$('.tab').on('mouseover', function() {
    if (!$(this).hasClass("active")) {
        // your code here
        $(this).css("background-color", "#C00");
    }
});

$(".tab:last").addClass("active");

Example fiddle