Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2009-05-20
8
Medium Priority
?
2,332 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

618 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