How to stop affecting more than one class with jQuery?

Question

Hello all.

I created this simple function and it works fine apart from the fact that I have more than one ".cta-mask" on the page. What do I need to do to stop affecting all the ".box-hover" when hover one of the ".cta-mask". Code bellow:

$(document).ready(function() { 

  //header box     
  $('.box-hover').css('opacity' , '.6');

  $('.cta-mask').hover(function(){                        
    $('.box-hover').stop().animate({left:'-12px', opacity:'0.8'},{queue:false,duration:300})
  }, function(){
    setTimeout(function() {
      $('.box-hover').stop().animate({left:'-190px', opacity:'.6'},{queue:false,duration:600})
    }, 500)
  });
}); 

Thank you for your help in advance.

Answer 1

nassuming .box-hover is inside .cta-mask, you can do something like this :

$('.cta-mask').hover(function(){                          
    $(this).find('.box-hover').stop().animate({left:'-12px',opacity:'0.8'},{queue:false,duration:300})
}