?
Solved

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

Posted on 2009-05-20
8
Medium Priority
?
2,326 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 9

Accepted Solution

by:
ftaco96 earned 2000 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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 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