jQuery mouseover adds class but is ignored by CSS

Here is my page. http://smartpeopletalkfast.co.uk/pp/shop/baby-essentials

Im trying to make it so when you hover over a product's div (div.product-listing) the 'BUY ME' text changes color.

Im using jquery to add a class of product-listing-hover to div.product-listing on mouse over and with firebug I can see this is working fine.

However, the following CSS does nothing:

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

But, if I change the CSS to this, 开发者_如何学Pythonthe text IS highlighted:

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

So it seems if you add a class with jquery after the page has loaded, the CSS doesn't recognize the class. Is this normal behavior?

Note, im using Drupal so by default it doesn't use the latest version of jquery, could this be relivant?

Thanks

You are adding the class:

.product-listing-hover

But your are trying to match the class:

product-listing-hover

Don't include the dot that indicates a CSS class selector when writing an HTML class

It seems to add the class with a . in front of the name. You don't have to use a . when adding a class using jQuery.

See the capture :