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;
    }

so that is how it is supposed to work. – kaysush Feb 13 '13 at 02:10 — kaysush, Feb 13 '13 at 02:10

John Conde · Answer 1 · 2013-02-13T02:30:41.587

7

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 {

edited Feb 13 '13 at 02:30

answered Feb 13 '13 at 02:11

John Conde

217,595
99
455
496

I think he wants that when in navigation bar he click some link and corresponding page opens up then the link he clicked must be `bold`. He wants to `bold` the link of current page in navigation bar. – kaysush Feb 13 '13 at 02:13
I'm not sure that is the case. I don't see anything that really indicates that. – John Conde Feb 13 '13 at 02:15
Yeah, that is what I'm trying to figure out. 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. Do you know how to do that? – James Mitchell Feb 13 '13 at 02:28
Yeah, better solution, explaining and defining mine one. UPing now. – tomis Feb 13 '13 at 02:32
@JamesMitchell: That's more of a JavaScript thing than a CSS thing. – Ry- Feb 13 '13 at 02:48
@JohnConde That kind of works, but it pretty much just makes it bold when my html page opens. I don't want it to go bold (or active) until I click on it, then I want it to remain like that. – James Mitchell Feb 13 '13 at 21:36
1

You'll need to use javascript for that. HTML/CSS has no current mechanism for anything like that – John Conde Feb 13 '13 at 21:40
I found someone else's code (w/ javascript). That seems to do the trick. http://jsfiddle.net/gromer/ZX7yg/ I'll test it and see what happens. Although I haven't learned javascript yet, so where would it go in the HTML? In the header? – James Mitchell Feb 13 '13 at 21:52

score 1 · Answer 2 · answered Feb 13 '13 at 02:15

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.

score 0 · Answer 3 · answered Feb 13 '13 at 02:34

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!

Still doesn't really apply. Thanks for the effort though. It sounds like something else is needed. I gave an example with MSN.com in the original question. — James Mitchell, Feb 13 '13 at 02:44

score 0 · Answer 4 · answered Dec 14 '17 at 19:51

0

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

answered Dec 14 '17 at 19:51

Kuiu

21
8

a:active only briefly works (during mouse click)

4 Answers4

Linked

Related