339946 - :hover style overridden by javascript changes to non-hover style

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[George G. Bolgar]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

If an HTML document contains a :hover style to change the background colour of an element when the mouse overs over the element (I would guess it applies to other style properties as well, but I have only tested it with the background colour), and then a javascript function changes the ordinary background colour of the same element, the hover style property is ignored.

I have written a minimal HTML document to demonstrate the point.



Reproducible: Always

Steps to Reproduce:
1) Open the HTML document.

2) Pass the mouse over the two rows in the  document and observe how the foreground and background colours of the rows change.

3) Click on the check box – this will invoke a javascript function that will change the colour of the two rows.  The background colour of the first row is changed to magenta, and the second row is changed to transparent.

4) Now move the mouse over the two rows.  You will observe that the text colour continues to respond to the hover style (the text colour was not changed by the javascript), but the background colour no longer responds to the hover style.

Comment 1

[George G. Bolgar]

Attachment: This is the test HTML document I referred to above

Comment 2

[Dave Townsend [:mossop]]

Yes that's right. Javascript set styles are set in the elements style attribute, which generally takes priority over stylesheet rules.

http://www.w3.org/TR/CSS21/cascade.html#specificity

Comment 3

[George G. Bolgar]

Apologies – you are right.  I had thought of the pseudo elements as discrete and separate selectors, and had not looked at whether they might be legitimately overridden by higher precedence selectors that omit the pseudo-element.