Anchor tag background changes after a:hover but not stays after visiting link

Question

I'm using anchor tag as a menu item in my web page. I used css for designing anchor tag like a menu look. I have three anchor tag on my page.

my css design in as follows-

 div.menu
{
 margin:0px;  
height:30px;
background-color:Gray;
}
span.menu a:link
{
    display:inline-block;
    font-weight:bold;
    color:#0000CC;
    background-color:#E8EEFD;
    text-align:center;
    padding:4px;
    text-decoration:none;
    width:70px;
    padding:5px;
    margin:0px;  
}
span.menu a:visited
{
    display:inline-block;
    font-weight:bold;
    color:#0000CC;
    background-color:#D3D5EB;
    text-align:center;
    padding:4px;
    text-decoration:none;
    width:70px;
    padding:5px;
    margin:0px;  
}
span.menu a:hover
{
    background-color:#D3D5EB;
}

above is my css design for anchor tag. I want to change the background color after clicking on the tag & color should stay up to the next selection of the menu item. I have tried throw above css. but it shows me the same background color after setting :visited style too.

When i run my page that time it is initially showing me the visited color & not the link color.

How to solve this?

thanks.

if you need the different background on visited ,than write the visited css differently not with link css. — Punit, Oct 22 '11 at 04:41

score 1 · Accepted Answer · answered Oct 22 '11 at 09:12

1

You can't do it with :visited. It applies to all links that you previously opened, not only clicked.

For example: If you target http://google.com in you link, then if browser rememver you ever visiting google.com in the past, it will apply :visited styles to the link. (Even if you never clicked this particular link)

To indicate selected item in menu you will need to apply another class to it as suggested above. For example make class "current" and apply it to the current link.

answered Oct 22 '11 at 09:12

Alexey Ivanov

8,128
2
26
27

how to do this? can u suggest some document on what you are saying? – Priyanka Oct 22 '11 at 10:29
Well it depends. If you just want it to stay selected after click on the element **without loading the link it's points** Todd Baur's solution below probably will do the job. If the menu link leads to the new page on the other URL and you want it to stay selected it is more tricky. – Alexey Ivanov Oct 22 '11 at 14:42
If you can change this pages separately then the easiest way to do it is by changing menu code itself — just add a class for current item on the new page. If for some reason you can't change menu code from page to page then you will need JavaScript. (see next comment) – Alexey Ivanov Oct 22 '11 at 14:45
There is two ways to select menu item trough JavaScript. First — by detecting the current url of the page, comparing it to the menu item "href" and selecting the one that matchs. How to find current url read here: http://stackoverflow.com/questions/1034621/get-current-url-with-javascript , to strip part of url (if you use relative addresses in menu) use regular expressions. – Alexey Ivanov Oct 22 '11 at 14:53
**Pros:** You don't need to change code from page to page and it will universally works. **Cons:** If you have second level of menu and want to select parent item, you can't do it this way. – Alexey Ivanov Oct 22 '11 at 14:53
Second way works if you need to change menu item without changing menu html and you need to select item even if url didn't match — you can add script that changes selected item to content zone. Example: http://jsfiddle.net/Sq2ej/ – Alexey Ivanov Oct 22 '11 at 15:00

score 0 · Answer 2 · edited Oct 22 '11 at 04:30

0

You'll have to set or swap style classes using JavaScript to achieve this. Here's an example in jQuery (http://api.jquery.com/toggleClass/) and you can also use plain JavaScript.

document.getElementById("MyElement").className += " MyClass";

edited Oct 22 '11 at 04:30

Sparky

98,165
25
199
285

answered Oct 22 '11 at 04:27

Todd Baur

995
8
22

Anchor tag background changes after a:hover but not stays after visiting link

2 Answers2