CSS deactivate a hover of a parent class

Question

I have two style sheets in page.html:
parent.css and child.css

In parent.css I have:

#MAINTable tr:hover
{ 
    background:#C0C0C0;  
}

I need to deactivate this from child.css

I'm doing:

#MAINTable tr:hover{text-decoration: none !important;}

But this is not working. What am I doing wrong?

Thanks a lot!

PD: Sorry if the question was too simple, learning CSS here

since the rules are different, what exactly do you need to deactivate? — Fabrizio Calderan, Mar 27 '14 at 09:43
tex-decoration and background has nothing to do with each other mate... — Jorge Y. C. Rodriguez, Mar 27 '14 at 09:43

score 2 · Accepted Answer · answered Mar 27 '14 at 09:43

2

You can try this to overwrite the background:

#MAINTable tr:hover {
    background: transparent;
}

answered Mar 27 '14 at 09:43

Ex-iT

1,479
2
12
20

score 0 · Answer 2 · answered Mar 27 '14 at 09:46

Parent.css defines the background, but child.css only sets the text decoration. They both stay, due to the nature of CSS. You need to override it manually.

In child.css:

#MAINTable tr:hover{
    text-decoration: none !important;
    background: none transparent !important;
}

If child.css is after parent.css you don't need the second !important. I used none transparent so that it also overrides any background images.

CSS deactivate a hover of a parent class

2 Answers2