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
    Nov 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can you access the hover peudoclass via DOM

    I am trying to create a tab effect using a combination of CSS and DOM.
    The CSS uses a background image that is one graphic with two images in it: An on and off state. Using CSS, but moving the background image, you can show hover and regular states.

    li#tab a { background-position: -76px -110px;}
    li#tab a:hover { background-position: 0 0; }


    Now I want to do something similar using DOM.

    This works to set the off (non-hover) state

    document.getElementById( "tab" ).getElementsByTagName("a").item(0).style.backgroundPosition="-76px -110px";

    Now I want to set the on state when the mouse is over the tab object. But I don't know if there is any way to access the hover state in the DOM model.

    Does anyone know? I know I can hack this by assigning mouseovers, but I ideally want to use the DOM model with hover.

  • #2
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'd have to do it like this, and also re-set the original position for onmouseout.
    Code:
    document.getElementById( "tab" ).getElementsByTagName("a").item(0).style.backgroundPosition="-76px -110px";
    
    document.getElementById( "tab" ).getElementsByTagName("a").item(0).onmouseover=function(){
      this.style.backgroundPosition="0 0";
    }
    
    document.getElementById( "tab" ).getElementsByTagName("a").item(0).onmouseout=function(){
      this.style.backgroundPosition="-76px -110px";
    }
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You don't need to write the styles from the functions, just toggle a classname - make a rule that's "li#tab a.hover" then just add/remove "hover" from the classname from those mouseover/our functions
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Here's a way it might be done, by accessing the stylesheet(s) directly - if only there were no cross-browser issues, particularly involving Opera. Can't figure out how v.7 missed this (while 'remembering' document.all).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    li#tab a { background: pink;}
    li#tab a:hover { background: orange; }
    
    
    </style>
    <script type="text/javascript">
    
    function setCSS(selector /* [attribute/value pairs] */)
    {
    	if (typeof document.styleSheets == 'undefined')
    		return;
    	var oRegExp = new RegExp(selector, 'i');
    	var rules, whichRule, num_rules, SS, whichSS = 0, num_sheets = document.styleSheets.length;
    	for (whichSS; whichSS < num_sheets; ++whichSS)
    	{
    		SS = document.styleSheets.item(whichSS);
    		var ruletype = (typeof SS.rules != 'undefined') ? 'rules' : 'cssRules';
    		if (typeof SS[ruletype] == 'undefined')
    			return;
    		rules = SS[ruletype];
    		num_rules = rules.length;
    		for (whichRule = 0; whichRule < num_rules; ++whichRule)
    		{
    			rule = SS[ruletype].item(whichRule);
    			if (oRegExp.test(rule.selectorText))
    			{
    				for (var a = 1; a < arguments.length; a+=2)
    					rule.style[arguments[a]] = arguments[a + 1];
    				return;
    			}
    		}
    	}
    }
    
    function switchCSS()
    {
    	switchCSS.which = Boolean(!switchCSS.which);
    	setCSS('li#tab a', 'background', switchCSS.which ? 'green' : 'pink');
    	setCSS('li#tab a:hover', 'background', switchCSS.which ? 'red' : 'orange');
    }
    
    </script>
    </head>
    <body>
    <ul>
       <li id="tab">
                   <a href="#null" onclick="return false;">blah blah blah</a>
       </li>
    </ul>
    
    <br /><br />
    <input type="button" value="switch CSS" onclick="switchCSS()" />
    </body>
    </html>


  •  

    Posting Permissions

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