Altering tags based on the fact that some of them contain an ID

[W8 4me]

Hi guys,

Do you know how I would be able to make all label tags that contain an id attribute hover color: blue and cursor: pointer?

I need to do this in IE7 and tried the below CSS, but to no avail:

label[id]:hover {
color: blue;
cursor: pointer;
}

thanks

[xelawho]

you can try this:

 <script type="text/javascript">
  labels=document.getElementsByTagName("label");
  for (i=0;i<labels.length;i++){
if(labels[i].id!=""){
labels[i].style.color="blue"
labels[i].style.cursor="pointer"	
	}
}
  </script>

[rtrethewey]

You can't set an element's pseudo class styles (such as :hover) directly with JavaScript because the JavaScript style property essentially modifies the inline HTML. You have to add a new rule to the stylesheet, which you can do with JavaScript. Start with the code you'll find in my article Changing CSS Stylesheets with JavaScript, and modify xelawho's example, slightly:

  labels=document.getElementsByTagName("label");
  for (i=0;i<labels.length;i++){
if(labels[i].id!=""){
  addCSSRule('#' + labels[i].id + ':hover', 'color:blue;');
  addCSSRule('#' + labels[i].id + ':hover', 'cursor: pointer;');
	}
}

[Declan1991]

Is it just the hover that isn't working? I thought that the [attr] selector worked in IE7 (quirksmode).

[W8 4me]

<script type="text/javascript">
function addCSSRule(selector, newRule) {
  if (mySheet.addRule) {
   mySheet.addRule(selector, newRule);		// For Internet Explorer
   } else {
   ruleIndex = mySheet.cssRules.length;
   mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);	// For Firefox, Chrome, etc.
labels=document.getElementsByTagName("label");
  for (i=0;i<labels.length;i++){
if(labels[i].id!=""){
  addCSSRule('#' + labels[i].id + ':hover', 'color:blue;');
  addCSSRule('#' + labels[i].id + ':hover', 'cursor: pointer;');
	}
}
  } // endif mySheet.addRule
 } // end addCSSRule()
  </script>

I don't know what I'm doing. I'm going to university.

thanks anyway guys.

[xelawho]

sorry, I missed the hover bit. you can replicate the hover pseudoclass with onmouseover and onmouseout functions for the text color. the cursor changes "naturally" on hover. far as I can see, this is all you need:

<script type="text/javascript">
  labels=document.getElementsByTagName("label");
  for (i=0;i<labels.length;i++){
if(labels[i].id!=""){
labels[i].onmouseover=function(){this.style.color="blue"}
labels[i].onmouseout=function(){this.style.color="black"}
labels[i].style.cursor="pointer"	
	}
}
  </script>