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
Solved

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

Posted on 2009-05-20
8
2,306 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

790 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