HTML Dog

Skip to navigation

Suckerfish :hover

By Patrick Griffiths and Dan Webb.

Most will be aware that you can change the style of a link that is hovered over with the cursor with the :hover pseudo-class. You should also be able to use :hover on other elements too:


li:hover ul { display: block }

Internet Explorer will only recognise :hover when it comes to links however, but try applying the Suckerfish JavaScript:


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

This example applies the Suckerfish to all li elements inside an element with an id of 'nav', so with a little addition to the CSS:


li:hover ul, li.sfhover ul { display: block }

You've got your hover effect sorted.

You can of course apply this mimicry to any element in any (or no) containing block by changing the second line of the JavaScript. Read the main article for more.

Examples

You can use Suckerfish :hover to achieve complex dropdowns (as described in Son of Suckerfish Dropdowns), which is probably its most striking application. But it could also be used to highlight links in hovered paragraphs for example.