The Underscore Archives

We've had a similar issue and after having tried a number of XHTML /  
CSS solutions, we've decided to stick with a bit of JavaScript.

JS (should be pretty self-explanatory):

function blockHover(targetClass,hoverClass){
	var n = document.getElementsByTagName("div");
	for (var i = 0; i < n.length; i++){
		if (n[i].className.indexOf(targetClass)>=0) {
			n[i].onmouseover=function() {this.className+=" "+hoverClass}
			n[i].onmouseout=function() {this.className = this.className.replace 
(new RegExp(" "+hoverClass+"\\b"), "")}
			n[i].onclick = function () {location.href =  
this.getElementsByTagName("a")[0].href}
		}
	}
}
window.onload = function(){blockHover("productBox", "boxHover");};

productBox being the class we're targeting and boxHover being the new  
class applied for styling purposes.

Without JS, you of course still get the link and simply miss out on  
the fancy 'box-hover' effect.

--
Greg Annandale
Founder / Developer
Coordinate New Media

+44 (0)7816 028599
greg at coordinatenewmedia.co.uk
www.coordinatenewmedia.co.uk