...

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



sonifyorg
11-10-2004, 06: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.

lavalamp
11-10-2004, 09: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";
}

brothercake
11-11-2004, 12: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

adios
11-11-2004, 06: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"
"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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum