By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,384 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

problem using javascript to apply a color to an <li>

P: 7
In the code below I can sucessfully target an <li> and change it's font size and font weight, but not color.

Am I missing something?

Javascript
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. //MOUSEOVER 
  4. function ChangeText(block, blockItem) {
  5.     if(block==0 && objCounter!=blockItem){    
  6.         document.getElementById("objectiveList").children[blockItem].className ="links_rolled"; 
  7.     }
  8. }
  9. //MOUSEOFF 
  10. function ChangeBack(block, blockItem) {
  11.     if(block==0 && objCounter!=blockItem){
  12.             document.getElementById("objectiveList").children[blockItem].className = "links_normal";  
  13.     }    
  14.  
  15. }
  16.  
  17.  
CSS

Expand|Select|Wrap|Line Numbers
  1.  
  2. .links_rolled{
  3. color: #33FF66;
  4. font-size:36px
  5. }
  6.  
  7. .links_normal{
  8. color:     #000000;
  9. font-size:10px
  10. }
  11.  
  12.  

As a newbie to using forums like this to ask questions, should I provide a link to the page? thanks for any help.
Mar 16 '11 #1

✓ answered by Rabbit

These are links? Link text color is defined by the following attributes.

Expand|Select|Wrap|Line Numbers
  1. a:link {color:#FF0000;}      /* unvisited link */
  2. a:visited {color:#00FF00;}  /* visited link */
  3. a:hover {color:#FF00FF;}  /* mouse over link */
  4. a:active {color:#0000FF;}  /* selected link */

Share this Question
Share on Google+
3 Replies


Rabbit
Expert Mod 10K+
P: 12,430
These are links? Link text color is defined by the following attributes.

Expand|Select|Wrap|Line Numbers
  1. a:link {color:#FF0000;}      /* unvisited link */
  2. a:visited {color:#00FF00;}  /* visited link */
  3. a:hover {color:#FF00FF;}  /* mouse over link */
  4. a:active {color:#0000FF;}  /* selected link */
Mar 16 '11 #2

dgreenhouse
Expert 100+
P: 250
As Rabbit alludes to, using CSS psuedo-classes is the most efficient method.
Plus, if JavaScript is disabled you still get the dynamic styling changes you're after.

See:
https://developer.mozilla.org/en/CSS/Pseudo-classes
https://developer.mozilla.org/en/Iss...-Element_hover
Mar 17 '11 #3

P: 7
thanks for your reply. That's so obviously a better way to do this it's shocking. thanks!
Mar 17 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.