I'm trying to make it where when the user .mouseover() the .featured\_products the .featured\_products, and the .button will apply the CSS affect to the selected container. The problem i'm encountering is it changes the .css of both the .feature\_products containers. I'd like it to only change the one that's being .mouseover(). I tried using $(this) but i'm not understanding it correctly. 

```
$(".featured_products").mouseover(function(){
    $(".fp_button").css("background-color", "#00addc");
    $(".fp_button").css("color", "#FFFFFF"); 
    $(this).addClass("fp_hover");
  });
  $(".featured_products").mouseleave(function(){
    $(".fp_button").css("background-color", "white");
    $(".fp_button").css("color", "#000000")
    $(".featured_products").removeClass("fp_hover");
  });

```

Here is my [Demo](http://jsfiddle.net/dshojaei/4417zugn/30/embedded/result/)