a:active only briefly works (during mouse click)

Question

For some reason, I made it so my text (a) that is active is bolded, but it is only active when it is clicked with my mouse, when it is released from the click, it turns off and the text goes back to it's normal state.

Why is this?

If you got to MSN, look at the text above their search bar. When you click on it, it bolds and turns orange. Without leaving the page. That's what I am trying to do.

HTML:

<div id="searchtopics">
<ul>

    <li><a href="#">Web</a> </li>
    <li><a href="#">MSN</a> </li>
    <li><a href="#">Images</a> </li>
    <li><a href="#">Video</a> </li>
    <li><a href="#">News</a> </li>
    <li><a href="#">Maps</a> </li>
    <li><a href="#">Shopping</a> </li>

</ul>
</div>

CSS:

#searchtopics {
    position:absolute;
    margin-left:208px;
    margin-top:38px;
    }

#searchtopics a {
    text-decoration:none;
    float:left;
    padding: 2px 6px 4px 6px;
    color:rgb(100,100,100);
    }

#searchtopics a:hover{
    text-decoration:underline;

    }

#searchtopics a:active{
    color:rgb(100,100,100);
    font-weight:bold;

    }

#searchtopics ul   {
    display:inline;
    list-style:none;
}


#searchtopics ul li {
    display:inline;
    color:rgb(100,100,100);
    font-family:"arial", times, sans-serif;
    font-size:12px;
    }

Answer 1

That's because that link is only active hen you click it with the mouse. If you want the effect to last for the entire length of the mouse being over it use :hover. If you want it to last after the page has been visited use :visited.

edit

If you want the link to stay active when a new page is loaded you'll need to give that link a class that applies that style to it:

<li><a href="#" class="active">Images</a> </li>

#searchtopics a:active, a.active {

Answer 2

There are four main states of a link: a a:hover a:active a:visited

a - is just when it is sitting there and it has never been clicked or in the processing of being clicked.

a:hover - this is kind of like the equivalent of a mouseover event in javascript (if you are familiar with that). when the pointer "hovers" over the link the style can be changed then.

a:active - this styling only shows up the split second that something is clicking on the link. This pseudo class is probably the least used by the general public for this reason.

a:visited - this styling shows up after a person clicks on a link.

So if you are trying to change the style of a link that is noticeable, I would recommend using a different pseudo class rather than a:active.

Hope this helps!

Answer 3

I know it's old topic but simple solution for it is to replace a.active instead of a:active , it did the trick for me so it should do for you aswell

Answer 4

If you want to display link which contains to actually displayed content, there is no other solution than little javascript. Write some function to display content which will disable all other bolds, enable bold for current link and display the content.