Internet Explorer 6 :hover className bug

I just spent an agonizing hour chasing down a fix for an annoying Internet Explorer 6 bug.

Here was the scenario:

I have a small gallery with back and next arrows. I used <a></a> tags styled with background images that were arrows. Initially I had css id's of #leftarrow and #rightarrow as well as a series of classes. The arrows would disable once they reached either end of the list of images.

Both "active" classes had a :hover pseudo-class that allowed the arrow to change background-image when hovered.

What I did was change the classname for the id to one that did not have a :hover pseudo-class when the user reached either end of the list - so once they were on the last item the "next" arrow would be disabled, or when there were on the first image, the "back" arrow would be disabled.

I used a small and easy JS function to change className for the ID when appropriate. This worked perfectly in Firefox 1.0.7, Firefox 1.5, and Safari 1.3.2 (Firefox on both Mac and PC) - it worked pretty well on Internet Explorer 6, but randomly, the images would disappear when the className was changed.

I took away the :hover pseudo class and it seemed to fix the issue - but I wanted to use CSS for the rollover rather than onmouseover and onmouseout.

After some experimentation, I found that by removing the ID, it worked fine in Internet Explorer 6 and everywhere else.

I used the getElementsByClassName() function to get the 2 links into an array.

My updated code looked like this:

<div id="scrapbook">
	<img class="scrapimg" src="/images/sb_01.jpg" title="Here's a caption for the first image" />

	<img class="scrapimg" src="/images/sb_02.jpg" title="Here's a caption for the secnod image" style="display:none" />

	<img class="scrapimg" src="/images/sb_03.jpg" title="Here's a caption for the third image" style="display:none" />

	<img class="scrapimg" src="/images/sb_04.jpg" title="Here's a caption for the fourth image" style="display:none"/>

	<div id="caption"></div>

	<a class="arr scrapleftdisabled" href="javascript:void(0)"></a>

	<a class="arr scrapright" href="javascript:void(0)"></a>
</div>



<script language="javascript">

	var scraps = document.getElementsByClassName("scrapimg","scrapbook")

	var arrows = document.getElementsByClassName("arr","scrapbook")

	var currScrap = 0

	$("caption").innerHTML = scraps[0].title;

	arrows[1].onclick=function(){changeScrap(1)};

	function changeScrap(dir)
	{
		currScrap = dir>0?(currScrap1?currScrap+dir:0)

		arrows[1].onclick=currScrap
		arrows[0].onclick=currScrap>0?function(){changeScrap(-1)}:function(){void(0)};

		arrows[1].className=currScrap
		arrows[0].className=currScrap>0?"scrapleft":"scrapleftdisabled"	

		for(i=0;i		{

			scraps[i].style.display=i==currScrap?"inline":"none"

			if(i==currScrap) $("caption").innerHTML = scraps[i].title;

		}
	}
</script>