Problem with CSS:hover!

[KPeh]

I'm having difficulty getting the CSS hover to work in IE (with individual images/divs for individual links). I've tried messing about for almost 2 hours and can't get it working. The best I've managed to do is this: www.whollypointless.co.uk/offon.html

Any ideas - thanks?

 

[Augmented]

IE doesn't support the hover pseudo-class on anything other than <a> elements.

In order to do what you want, you'll need to display: block the <a> elements, set them to the height/width you need and then you can manipulate their hover state in CSS.

 

[KPeh]

I did try that before, but still couldn't get it working, eg:

#offon5, #offon6 {
	display: block;
	float: left;
	width: 100px;
	height: 100px;
	background: url(offon1.jpg) no-repeat;
	}
#offon6 { background-image: url(offon2.jpg); }
#offon5 a:hover, #offon6 a:hover { background-position: -100px 0; display: block }

Doesn't work in any browsers? When I try to follow the advise of this (which is different to what I am trying to do) and say use "#offon5 a" for the basic info, that doesn't work either. I am quite stumped.

Refresh this page again to see what I'm struggling with: http://www.whollypointless.co.uk/offon.html. As far as I can see 7/8 is pretty much the same thing as the example page?

thanks!

Edit: 7/8

#offon7 a, #offon8 a {
	display: block;
	float: left;
	width: 100px;
	height: 100px;
	background: url(offon1.jpg) no-repeat;
	}
#offon7 a { background-image: url(offon2.jpg); }
#offon8 a:hover, #offon6 a:hover { background-position: -100px 0; display: block; }

 

[Augmented]

7/8 should work, but you just need to make sure there's actually an element with an ID of offon7 or offon8 in the markup .

If you change the last example's rules to point to the right elements (#offon5 a, #offon6 a etc.) then you should see it working.

 

[KPeh]

Heh, fantastic, thanks very much . That's a relief!



(And in case anyone searches and finds this thread I've updated the page with the working code).