You get a bonus - 1 coin for daily activity. Now you have 1 coin

why the :Hover pseudo-class doesn't work

Practice




:Hover pseudo-class doesn't work


CSS
.number :hover
{font-family: FuturaFuturisLightC, sans-serif;
font-size: 24px;
text-align:left ;}


HTML
2

hover can fail to work for several reasons

1. Internet Explorer before 7 doesn't support this property for anything other than hyperlinks
2. you can't apply the position: relative property to a neighbouring element.
3. tag id and name attributes are duplicated, they must be unique!!
4. the hover property may be overridden somewhere, use !important;

background-color:#111111 !important;
text-decoration:none !important;


5. a:link comes first and only then a:hover, never the other way round!!
Mnemonic rule:

LoVe/HAte

1) Link
2) Visited
3) Hover
4) Active
6. double-check whether some style is overriding the hover element? whether something is covering it?
7. double-check the syntax - remove the extra space in .number :hover
it should be .number:hover

Comments

To leave a comment

If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Lectures and tutorial on "Scripting client side JavaScript, jqvery, BackBone"

Terms: Scripting client side JavaScript, jqvery, BackBone