javascript - 如何仅使用 $(this) 更改所选元素的 CSS

Question

我试图在用户 .mouseover() .featured_products .featured_products 和 .button 将 CSS 影响应用于所选容器时将其设置为。我遇到的问题是它更改了两个 .feature_products 容器的 .css。我希望它只更改正在使用 .mouseover() 的那个。我尝试使用 $(this) 但我没有正确理解它。

$(".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");
  });

这是我的 Demo

Answer 1

您可以在选择器中使用第二个参数来表示父级，例如:

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

在这里查看:http://jsfiddle.net/4417zugn/31/

---

你也可以这样做:

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

等有很多方法。

我建议的一件事是更改类名而不是修改单个 CSS 规则，如下所示:http://jsfiddle.net/4417zugn/33/

---

最后，这一切都可以只使用 CSS，像这样:http://jsfiddle.net/4417zugn/35/