How to change CSS over selected element only using $(this)

Tags: javascript,jquery,html,css

Problem :

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

---

Solution :

You can use the second parameter in the selector to denote a parent, like:

$(".fp_button", this).css("background-color", "#00addc");

See it here: http://jsfiddle.net/4417zugn/31/

---

You can also do something like:

$(this).find(".fp_button")...

etc. There are many ways.

One thing I'd suggest is to change the class name instead of modifying individual CSS rules, like this: http://jsfiddle.net/4417zugn/33/

---

Last thing, this is all possible using only CSS, like this: http://jsfiddle.net/4417zugn/35/