Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The a:hover object

    Is there a way to access the color of hover links in a function? In other words, what is the DOM path to change it (eg. document.links.hover.color ?????)

  • #2
    New Coder
    Join Date
    Aug 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi,

    you can change it using getElementById as part of w3c DOM

    tested in IE6
    will not work in nn4.7 for sure. for the rest who knows

    Code:
    <html>
    
    <head>
    <style>#somelink</style>
    
    <script>
    var clr;
    function changeColor (flag)  {
    	
    if (flag == 1) 
    {
    
    	for (i=0;i<3;i++)
    	 {
    	if (document.frm.c[i].checked == true)
    	 {
    		clr = document.frm.c[i].value;	
    		document.getElementById("somelink").style.color = clr;
    	}
    	}
    }
    else 
    {
    	 document.getElementById("somelink").style.color = "black" }
    }
    
    </script>
    
    
    </head>
    
    <body>
    <a href ="http://" id ="somelink"  onMouseover ="changeColor(1)" 
    onMouseout ="changeColor(0)"
    >Link to stuff</a>
    <br><br>
    <form name ="frm">
    green<input type = "radio" name = c  value ="green"><br>
    yellow<input type = "radio" name = c value ="yellow"><br>
    orange<input type = "radio" name = c  value ="orange"><br>
    </form>
    </body>
    
    </html>
    A.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    document.defaultView.getComputedStyle(refToAnchor, 'hover').getPropertyValue('color');

    That should provide a read-only version of the color generated during a hover event. (In theory at least in Gecko browsers, though initial testing shows otherwise?)

    Until Mozilla implements the OverrideStyle defined in DOM2 CSS, which would look like:
    document.getOverrideStyle(refToAnchor, 'hover').setProperty('color', 'newcolor', '');


    I believe you'll need to actually navigate through the CSSRule's until:

    document.styleSheets.item(0).cssRules.item(x).selectorText

    contains the string ":hover", from which you can then say:

    document.styleSheets.item(0).cssRules.item(x).style.color = 'newcolor';


    Keep in mind this is all Mozilla-only. IE has its own proprietary implementation of navigating through CSS rules, but to give it credit, it is remarkably similar to the standards in some ways,

  • #4
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you both very much! very helpful!


  •  

    Posting Permissions

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