www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

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

    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

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    you can try this:
    Code:
     <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>

  3. #3
    Join Date
    Mar 2011
    Posts
    1,108
    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:

    Code:
      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;');
    	}
    }
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Is it just the hover that isn't working? I thought that the [attr] selector worked in IE7 (quirksmode).
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Code:
    <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.

  6. #6
    Join Date
    Nov 2010
    Posts
    978
    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:
    Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles