Skip to main content

Bug Tracker

Side navigation

#6325 closed bug (invalid)

Opened March 20, 2010 05:23PM UTC

Closed October 18, 2010 10:56PM UTC

setting .css for class destroys its :hover definition in css file

Reported by: mrfx Owned by:
Priority: low Milestone: 1.4.3
Component: css Version: 1.4.2
Keywords: css :hover hover Cc:
Blocked by: Blocking:

First let's define in styles:

.classOne { background-color: white; }

.classOne:hover { background-color: green; }

Afer use of:


classOne elements will change to red, but green hover color will not work anymore.

Attachments (0)
Change History (3)

Changed June 16, 2010 03:45AM UTC by dmethvin comment:1

Most likely because the .css() is done with an inline style? A workaround would be to change the class instead.

Changed October 06, 2010 12:05AM UTC by addyosmani comment:2

priority: → low

What appears to be happening here (as tested in FF 3.6.10 and Safari 5.02 on OSX) is that setting the css for a class definition results in that change effectively resetting the attribute you were updating for other events/states defined for that class such as :hover.

Please see here for a live example:

Eg. if I have a class-name of type .myClass and a hover state .myClass:hover, both of which had different background-colors, setting the background-color of .myClass through jQuery (in terms of what FireBug is seeing at least) is resetting the values of that attribute for .myClass and .myClass:hover and then applying the updated background-color attribute as per what was being set in jQuery.

This *may* be desired functionality or it may simply be a case that as we don't support selecting via :hover (this is an event, not an attribute), updating the value of a class *does* result in a reset on all states but we simply don't have the ability or support for updating :hover back to it's original value.

Flagging for review as a better explanation for this may be available.

Changed October 18, 2010 10:56PM UTC by snover comment:3

resolution: → invalid
status: newclosed

This is how CSS specificity works.