jQuery mouseover添加了类但被CSS忽略

Question

这是我的页面。 http://smartpeopletalkfast.co.uk/pp/shop/baby-essentials

我试图这样做，当你将鼠标悬停在产品的div（div.product-listing）上时，'BUY ME'文字会改变颜色。

我使用jquery在mouse和firebug上添加了一类产品列表hover到div.product-listing我可以看到这个工作正常。

但是，以下CSS不执行任何操作：

.product-listing-hover .buy-me a {
    color: red;
}

但是，如果我将CSS更改为此，则会突出显示文本：

.product-listing .buy-me a {
    color: red;
}

因此，如果在页面加载后添加带有jquery的类，CSS似乎无法识别该类。这是正常的行为吗？

注意，我使用Drupal，所以默认情况下它不使用最新版本的jquery，这可能是重要的吗？

谢谢

Answer 1

您正在添加课程：

。产品上市悬停

但是你正试图匹配这个班级：

产品列表悬停

在编写 HTML类时，不要包含指示 CSS类选择器的点

Answer 2

似乎在名称前添加了.的类。使用jQuery添加类时，不必使用.。

参见捕获：