CODEWITHSUNDEEP
javascriptcss
Marco Bernardini
Marco Bernardini

Reputation: 705

After a background color change with Javascript the :hover don't change the color

I have a long form with many fields. Some of the fields get their data from separate DIV, where there are other more specific fields.

Every field, along with its label, is included into a separate block. To highlight the fields there is a CSS :hover for their class.

The CSS :hoveron the fields blocks works smoothly, and also the onmouseover and onmouseout over the many DIV passing data to them, using the following Javascript:

function LineOn(whichOne) {
    document.getElementById(whichOne).style.backgroundColor = '#cf0';
}

function LineOff(whichOne) {
    document.getElementById(whichOne).style.backgroundColor = '#fff';
}

But, after the execution of the Javascript, the hover stops to work (i.e. the block remains white), without reporting any console error or message.

This happens both with Firefox 36.0.3 and with Chrome 39.0.2171.71, running on a Slackware current release.

Is there a sort of hierarchy giving to the background color set with Javascript the priority over the one defined in the <style> section?

Upvotes: 0

Views: 170

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

Yes, styles defined directly in the element's style property overrides any value set in CSS, unless that style has !important on it.

CSS specificity http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

The priority level of the selector is decided in Point of combination of selectors.

  • style attribute = a
  • number of ID attributes in the selector = b
  • number of other attributes and pseudo-classes in the selector = c
  • number of element names and pseudo-elements in the selector = d

That's one good reason not to set styles attributes; set a CSS class instead yet.

Upvotes: 1

Related Questions