Solved

Javascript change link's CSS background color when link is selected

Posted on 2009-05-20
8
2,300 Views
Last Modified: 2013-11-19
When a user presses a link on the page I want the background color of the link and enclosing div background color to change.  So far I can make the div's background change, but not the a:link

My CSS
#hybrid, #hybrid a:link, #hybrid a:visited{
      background-color: #464646;
      text-decoration:none;
}

My working js
document.getElementById("hybrid").style.backgroundColor="#464646";

but how do I access the a:link that is part of #hybrid?
0
Comment
Question by:lvmllc
  • 4
  • 2
  • 2
8 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24431849
Why don't you just use the css style attribute of visited to change the link color for anchor links that have been clicked?
a:visited { color: white; }

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24431903
Noting, of course, that if you choose white as your color (which really should be #FFFFFF), your links are going to disappear on a while background...
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24431917
Why do you have both the #hybrid a:link and #hybrid a:visited the same?
Just differentiate them...
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Accepted Solution

by:
ftaco96 earned 500 total points
ID: 24433633
a:link simply means an unvisited link. I think what you're trying to do is use the a:active and a:visited pseudo-classes.

a:link  /* unvisited link */
a:visited  /* visited link */
a:hover  /* mouse over link */
a:active  /* selected link */

#hybrid, #hybrid a:active, #hybrid a:visited{
      background-color: #464646;
      text-decoration:none;
}

You may also want to think about using "background-color: transparent" for your <a> tags.
0
 

Author Comment

by:lvmllc
ID: 24443109
There is a design reason for the same look of both links and visited links.

Hybrid is just one of several buttons on the page. the idea was  that when a person selects the button a js function is called. That function loads text into a div, communicates with a flash element's navigation and  sets the css background of the link to show it as the current item and resets the previous link back to its normal state.

Please let me know if this changes either recommendation?  I will try the transparent value for the background as well.

Thanks

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24443425
The simple answer to the original question would appear to be solved by changing the background color for a visited link.

What am I missing?
0
 
LVL 9

Expert Comment

by:ftaco96
ID: 24444347
I think part of the question is whether an <a> tag without a true href can be considered "visited".

Can you post your code? A few of these div-surrounded <a> tags, the css, any javascript involved?

Is "hybrid" supposed to be a css class or the id of one of your divs? The way you have it here, it refers to an element with id="hybrid".
0
 

Author Closing Comment

by:lvmllc
ID: 31583510
background-color: transparent   did the trick perfect!
0

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question