Solved

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

Posted on 2009-05-20
8
2,293 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Import data into excel from web page 10 82
React or Angular? 6 53
is this a cms? 8 35
Configuring a checkbox in CSS and php 18 32
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to count occurrences of each item in an array.

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now