Suckerfish :hover

作者：Patrick Griffiths 和 Dan Webb。

大多数人应该知道，你可以使用 :hover 伪类来改变鼠标悬停在链接上的样式。你也应该能够将 :hover 应用于其他元素。


li:hover ul { display: block }

然而，Internet Explorer 只会在链接上识别 :hover。但可以尝试应用 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);

此示例将 Suckerfish 应用于 ID 为 'nav' 的元素中的所有 li 元素。因此，只需对 CSS 做一点小小的改动，


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

你就可以实现悬停效果了。

当然，你可以通过更改 JavaScript 的第二行，将这种模仿应用到任何（或没有）包含块中的任何元素。更多内容请阅读主文章。

示例

你可以使用 Suckerfish :hover 来实现复杂的下拉菜单（如Suckerfish 下拉菜单的子集中所述），这可能是它最引人注目的应用。但它也可以用于突出显示悬停段落中的链接，例如。