Trouble assiging formatting to ID...

I have a function which I run onload to apply formatting to a list of links.
This function handles both the static state and the hover state formatting.

function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}

This works perfectly. Here is the wrinkle. I am tagging the first item in my list with a class (could be ID if it makes it easier) of "active".
And to this element I want to apply a backgroundPosition of "0 46px. Initially, I thought I could just define this in my style sheet.
No go. Seems the JS overwrites those values. This is also true for defining inline as well.

So, I've been trying to figure out how to incorporate this logic in my featuredEffects() function. I've tried:
function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
if(document.getElementById("active").className=="active"){
document.getElementById("active").style.backgroundPosition = "0 46px";
}else{
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}
However, as you can guess this doesn't work. Which is why I'm here. Would anyone have a clue how to do this?

Thanks in advance.

Thought this might work too; move the className of my active item to the link contained in my list item. Then:

function featuredEffects() {
featured = document.getElementById("work_1").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
/* updated conditional */
if(featured[q].getElementsByTagName("a")[0].className=="active"){
document.getElementById("active").style.backgroundPosition = "0 46px";
}else{
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work_1");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}

}

Would anyone happen to be able to help?

The trick is seems to be targeting the one item in my list with a class of "active".

I've tried
function makeHovers() {
featured = document.getElementById("work").getElementsByTagName("li");
for(var q = 0; q < featured.length; q++) {
featured[q].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";
//conditional to target li with class of active - doesn't work
if(featured[q].className=="active") function(){
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseover = function() {
this.getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";
}
featured[q].onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 46px";}}
}
var featuredZone = document.getElementById("work");
featuredZone.onmouseout = function() {for(var w = 0; w < featured.length; w++) {featured[w].getElementsByTagName("a")[0].style.backgroundPosition = "0 0";}}
}

The conditional here does not function. However, the rest of the function is working.

What are you trying to do?