View Full Version : Can you access the hover peudoclass via DOM

11-10-2004, 07:28 PM
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.

11-10-2004, 10:07 PM
You'd have to do it like this, and also re-set the original position for onmouseout.
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";

11-11-2004, 01:27 AM
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

11-11-2004, 07:51 PM
Here's a way it might be done, by accessing the stylesheet(s) directly - if only there were no cross-browser issues (http://www.quirksmode.org/dom/changess.html), particularly involving Opera. Can't figure out how v.7 missed this (while 'remembering' document.all). :confused:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

<style type="text/css">

li#tab a { background: pink;}
li#tab a:hover { background: orange; }

<script type="text/javascript">

function setCSS(selector /* [attribute/value pairs] */)
if (typeof document.styleSheets == 'undefined')
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')
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];

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');

<li id="tab">
<a href="#null" onclick="return false;">blah blah blah</a>

<br /><br />
<input type="button" value="switch CSS" onclick="switchCSS()" />