我试图在用户 .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
最佳答案
您可以在选择器中使用第二个参数来表示父级，例如:
$(".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/
关于javascript - 如何仅使用 $(this) 更改所选元素的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34211757/