CODEWITHSUNDEEP
jquerycss
Evanss
Evanss

Reputation: 23593

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, the 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

Upvotes: 0

Views: 133

Answers (2)

Haza
Haza

Reputation: 2999

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 :

image

Upvotes: 0

Quentin
Quentin

Reputation: 943625

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

Upvotes: 3

Related Questions