link style scheme not working

Question

a.mO {color: white; cursor:pointer; margin-left:10px; font-weight:400; font-size:12px; display:block; border-top:1px solid #300;}

---

a.mO:link {
color: white; cursor:pointer; margin-left:10px; font-weight:400; font-size:12px; display:block; border-top:1px solid #300;
}
a.mO:visited {
color: white; cursor:pointer; margin-left:10px; font-weight:600; font-size:16px; display:block; border-top:1px solid #300;
}

a.mO:hover {
color: white; cursor:pointer; margin-left:10px; font-weight:900; font-size:12px; display:block; border-top:1px solid #300;
}

a.mO:active{
color: white; cursor:pointer; margin-left:10px; font-weight:900; font-size:14px; display:block; border-top:2px solid #300;
}

---

The first code works. But as soon as I replace it with the second one it stops working.

My html is :

<div><a class="mO"   onclick="loadPage(31);">ABCD Status</a></div>

Thanks for help...

Answer 1

Some of these will not work unless you include the href attribute (it isn't a link other wise):

<a class="mO" href="#" onclick="loadPage(31);">ABCD Status</a>

You may also want to return false; after calling the function, to prevent the page from jumping to to top. You can either do onclick="loadPage(31); return false;", or onclick="return loadPage(31);", and have it returning false.

Answer 2

Try changing your code to

<div><a class="mO" href="#"  onclick="loadPage(31);">ABCD Status</a></div>

and see if that helps any.