吸盘鱼之子
2004年5月21日，星期五 (上午10:59 GMT)
HTML Dog 新增了七篇文章。
不仅有 全新版本的吸盘鱼下拉菜单，它还改进了吸盘鱼 :hover 的 JavaScript，并且还“诞生”了几篇相关的姊妹文章。
这些文章解释了如何使用极少的 JavaScript，在 Windows 版 Internet Explorer（5.0 及以上版本）中模拟 CSS3 动态伪类（如 :hover、:active、:focus 甚至 :target）的效果，使其成为一种真正可行且实用的选择。
- 吸盘鱼之子 - 介绍吸盘鱼，它的工作原理，如何实现，以及为什么它优于其他方法。
- 吸盘鱼 :hover - 最初的轻量级、符合标准、易于访问、跨浏览器兼容的
:hover模拟。 - 吸盘鱼之子下拉菜单 - 现在支持多级菜单，重量更轻，更易于访问，并且比原始版本更具兼容性（现在支持 Opera 和 Safari 1.2）。这必须是实现下拉菜单的最佳方法，也是吸盘鱼实际应用的最佳范例。
- 吸盘鱼 :focus - 模拟
:focus伪类，您可以将 CSS 规则应用于获得焦点的页面元素，例如用户正在键入的文本框。 - 吸盘鱼 :active - 想要为用户正在点击的某个元素设置样式吗？无论您是否有这个需求，这里都有实现的方法。
- 吸盘鱼 :target - CSS3
:target伪类允许您为目标页面锚点设置样式。现在它不仅能在 Mozilla 中工作，您还可以在 IE 中获得相同的结果。 - 吸盘鱼鱼群 - 如果您想使用多个此类伪类模拟器，这里有一种方法。代码是模块化的，您可以删除不需要的部分，只留下精简的 JavaScript。
这组文章的出现，源于我和 Dan 在一起整理改进版的 吸盘鱼下拉菜单 时（“嘿……如果我们做这个会怎么样？哦，我们还可以做那个。”）。我想我们可能有点得意忘形了，但我认为这是值得的。
评论
评论5
它似乎无法在 IE/Mac 5.2 中工作。我知道有 IE/Mac 用户，所以我需要支持。有没有办法让 Son of Suckerfish 在那里工作？Suckerfish 本身可以。
谢谢，
JimB。
Jim Burrows 于 2004 年 5 月 23 日星期日晚上 5:15 GMT 如是说。
评论6
Jim，Dan 注意到了这一点，并在下拉菜单的讨论区留了言，尽管这显然是所有吸盘鱼方法都会遇到的问题。
https://htmldog.cn/ptg/archives/000050.php#comment17
Patrick 于 2004 年 5 月 23 日星期日晚上 5:19 GMT 如是说。
评论7
我在使用吸盘鱼下拉菜单时遇到了问题，当它覆盖在一个定位的 div 上时。换句话说，如果下拉菜单覆盖在一个定位的 div 上，您就无法用鼠标访问下拉列表。相反，下拉菜单会消失。我刚找到这个网站。我一直在使用 alistapart 的教程。我还没试过新版本。旧版本的问题在新版本中解决了？任何建议都将对我大有帮助。谢谢。
marshn 于 2004 年 5 月 25 日星期二凌晨 12:38 GMT 如是说。
评论9
suckerfish :target 真糟糕 - 它在 Opera 中不起作用，但本来可以工作的，如果您不使用 window.attachEvent 的话。
Dante 于 2004 年 5 月 26 日星期三凌晨 1:58 GMT 如是说。
评论10
当然，您可以通过稍微修改代码让它在 Opera 中工作，但这并不是必需的，如果我们为了一个浏览器而改变代码的工作方式，就会破坏文章的重点。如果您想让它在 Opera 中工作，就别抱怨了，自己修改代码吧。
Dan Webb 于 2004 年 5 月 26 日星期三上午 10:45 GMT 如是说。
评论11
Re: JavaScript 与 HTC。HTC 可以隐藏在 IE 条件注释中，这样验证器就看不到它了。我用 IE 5.00.2920.0000 (Win2k) 和 IE 5.00.2614.3500 (Win98) 进行了测试。两者都工作正常。最后，HTC 是通用的，可以用于菜单以外的更多功能。
Andrew Gregory 于 2004 年 5 月 29 日星期六凌晨 5:28 GMT 如是说。
评论12
Andrew，IE 条件注释有点像 hack，依赖于专有代码，我必须说我不太喜欢它，但好吧。至于通用性，这部分内容正是这些吸盘鱼文章所要讲述的 - 解释它们可以用于下拉菜单以外的更多功能。
Patrick 于 2004 年 5 月 29 日星期六上午 8:54 GMT 如是说。
评论13
回复评论 #8，应用更高的 z-index 在 Mozilla 中有效，但在 IE 中似乎没有效果。下拉菜单仍然显示在定位的内容后面。
Len 于 2004 年 6 月 1 日星期二下午 5:14 GMT 如是说。
评论14
要在 IE 中使下拉菜单显示在定位 div 之上，请将定位 div 的 z-index 设置为一个更低的值（例如 -1）。在我正在构建的页面上有效。
我正在寻找一种方法，让子菜单显示在菜单上方而不是下方。我不太理解目前使用的定位方式（我是新手），所以我还没有找到一种方法来做到。有什么建议吗？
Ian 于 2004 年 6 月 2 日星期三晚上 10:31 GMT 如是说。
评论15
z-index 为 -1 在 IE 中有效，但会破坏 Mozilla。Mozilla 将 -1 的 z-index 定位在“body”后面，实际上使其完全消失。
Len 于 2004 年 6 月 4 日星期五下午 1:53 GMT 如是说。
评论16
我在再次测试 Mozilla 时也意识到了这一点。我没有更改定位 div 的 z-index，而是将无序列表的 z-index（即 #nav li ul）设置为 2 或其他更高的值。这在两个浏览器中都有效。抱歉搞错了。
Ian 于 2004 年 6 月 4 日星期五晚上 11:30 GMT 如是说。
评论17
我不是专家，恰恰相反，但我在 http://www.mouldingname.info/home.html. 已经成功地实现了弹出菜单，并且在 Opera 和 Mozilla 中运行了几个月。
我对 JavaScript 一无所知，想知道这个 12 行的 JS 能否应用到我的网站上。在 12 行代码中有三次“this.className”。我猜我需要替换它们，但究竟是什么？另外，我是否需要在 head 中添加什么来启用 JavaScript？
抱歉，我对 JavaScript 一窍不通，但我看过一本书，它简直让我头疼。我不是编程型的人，我想！
Peter 于 2004 年 6 月 6 日星期日晚上 3:02 GMT 如是说。
评论18
回复评论 #9 和 #10 关于 Opera 的内容；如果复制样式规则，即使用
h2.sftarget { color: red; }
h2:target { color:red; }
而不是
h2:target, h2.sftarget { color: red; }
这样在 Opera 7.50 中就可以工作了。
Ash Searle 于 2004 年 6 月 18 日星期五上午 11:43 GMT 如是说。
评论19
大家好。
做得很好。
一个问题：有没有简单、跨浏览器的办法让菜单的隐藏可以定时？
setTimeout("this.className=this.className.replace(new RegExp(' sfhover\\b'), '');",500);
不起作用，因为第一个参数只接受字符串。所以“this”对象的引用不起作用。
有什么想法吗？
Brad 于 2004 年 6 月 30 日星期三凌晨 3:01 GMT 如是说。
评论20
IE7 已经支持 IE5.0 一段时间了（http://dean.edwards.name/IE7/history/), 如果需要，可以将文件大小压缩到大约 20 kB。
Fatalis 于 2004 年 7 月 2 日星期五上午 11:50 GMT 如是说。
评论21
我在 IE 中让菜单很好地工作了，但在 Mozilla/Firebird 中，所有级别的菜单都保持打开状态。有什么想法吗？
Michael 于 2004 年 7 月 22 日星期四凌晨 12:23 GMT 如是说。
评论24
我喜欢吸盘鱼的概念！你们太棒了！唯一让我诟病的是，如果用户不小心将鼠标移出下层菜单，整个列表都会消失，他们必须从头开始。我尝试实现一个计时器，让用户有机会重新回到菜单上，但之后元素就无法正确隐藏。你们有计划提供这样的功能吗？我花了整整两天时间研究，最后放弃了。
Steve Davis 于 2004 年 7 月 28 日星期三晚上 10:22 GMT 如是说。
评论25
这是对我之前帖子的一个跟进。我解决了我想做的事情。它之所以有效，是因为我没有使用 onmouseover 和 onmouseout，而是使用了 onmouseenter 和 onmouseleave，但这确实有效！感谢你们给了我一个好的开始！
Steve Davis 于 2004 年 7 月 29 日星期四晚上 10:50 GMT 如是说。
评论26
嗨 - 如果您查看“更漂亮的”示例（https://htmldog.cn/articles/suckerfish/dropdowns/example/) 中的 Safari，您会看到所有菜单项都层叠在一起。有什么线索可以解决这个现象吗？
mark 于 2004 年 8 月 2 日星期一晚上 6:15 GMT 如是说。
评论27
观察到很好的格式，并回答了我自己的问题，我发现“#nav li ul”的宽度必须大于“#nav li”，这样在 Safari 中才能正常工作。0.01 em 就足够了，尽管有人可能会告诉我这会在更主流的浏览器中产生问题。
mark 于 2004 年 8 月 3 日星期二晚上 7:27 GMT 如是说。
评论28
你们做得很好。我喜欢将 Suckerfish Dropdowns 添加到我的网站上。
我非常期待看到你们未来的更多作品。
希望你们也能解决 Netscape 6.0 的失败问题。
Dan Ced 于 2004 年 8 月 4 日星期三下午 2:10 GMT 如是说。
评论29
我的吸盘鱼下拉菜单在鼠标移上去时会闪烁，我遇到了一个问题。有什么建议吗？？
谢谢！
http://www.camp-emmagay.com/gcltest/test.htm
Ethan 于 2004 年 8 月 6 日星期五凌晨 2:22 GMT 如是说。
评论30
Ethan，对我来说没有闪烁，你得说明你使用的是什么浏览器。我用的是 Firefox 0.9.1，没有闪烁。
tati 于 2004 年 8 月 8 日星期日晚上 11:36 GMT 如是说。
评论31
这些文章非常有趣，我非常喜欢。我真的很认为你们应该把它们整合到一个地方，并提供 zip 或 rar 文件下载。它们值得被广泛传播！
Mark, web designer 于 2004 年 8 月 10 日星期二下午 12:02 GMT 如是说。
评论32
我真的想说你们在 Suckerfish Dropdowns 上做得非常出色。
期待在未来看到更多精彩的内容：)
danne 于 2004 年 8 月 11 日星期三凌晨 1:44 GMT 如是说。
评论34
我在 IE/Win 上似乎遇到了一些问题。当我把 JS 从页面中剥离并放到一个外部 JS 文件中时，会遇到严重的问题。
如果我使用原始的 Suckerfish JS（来自 ALA 网站），下拉菜单根本不起作用，即使它在页面内嵌 JS 时工作得很好。文件名拼写正确，路径也正确。
如果我使用本网站上的 JS，在 IE 中会出现 JavaScript 错误：“document.getElementByID(...) is null or not an object”。同样，如果它在页面本身里面，它就能正常工作；但如果放到一个外部 JS 文件中，它就会出问题。
我想保持内容与代码的干净分离。有没有人能给我一些关于为什么相同代码内嵌工作正常而外部文件不行的情况的建议？
René Kabis 于 2004 年 8 月 26 日星期四凌晨 1:29 GMT 如是说。
评论35
Rene，
我遇到了和你完全一样的问题。对我来说，我确定是因为我调用了一个不存在的 ID。所以为了纠正这个问题，我改变了函数 suckerfish 中的这段代码：
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
改为：
if (document.getElementById(parentId)) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
我只是检查一下 ID 是否确实存在，然后再尝试操作。希望有所帮助。顺便说一句，Suckerfish 代码是一项了不起的作品。谢谢，它帮了我巨大的忙。
Matt Voss 于 2004 年 8 月 26 日星期四下午 4:35 GMT 如是说。
评论36
感谢 Suckerfish！哈哈
我在 IE 中遇到了一个问题。下拉菜单不是直接向下展开。它是向下并向右展开。
任何关于如何修复此问题的建议都将不胜感激。
Shawna 于 2004 年 9 月 9 日星期四晚上 8:14 GMT 如是说。
评论37
我在 IE5 中遇到一个有趣的现象 - 当您将鼠标悬停在链接上以激活菜单时，您会发现内容在页面上滚动。到目前为止，我尝试让各种 Suckerfish 下拉菜单工作都失败了，因为它们在 IE5 中不起作用。这是一个遗憾，因为我们公司仍有大约 350 名用户使用 IE5 :-(
有什么想法可能导致这个问题吗？
Tony B 于 2004 年 9 月 13 日星期一下午 2:46 GMT 如是说。
评论38
首先，我想感谢 Patrick 和 Dan 提供的非常有用的代码，你们做得非常棒。
不幸的是，我还是遇到了一些问题；希望有经验的人能给我一些启发。
我一直在尝试为一个非常挑剔的客户设置一个网站，他坚持使用框架而不是无框架，几乎不使用 JavaScript（但我愿意稍微放宽这个规则），并且需要一个多层下拉菜单。到目前为止，我成功地结合了我自己的设计以及从 Bobby van der Sluis 在 ALA 上的文章中获得的关于定位页脚（和页眉）的知识，这似乎在 Mozilla Firefox 0.9、IE 5.0、5.5 和 6、Opera 7、NN 7 中都能正常工作。（目前不知道 Mac 如何处理）。
问题很简单，但答案却出奇地难以捉摸。吸盘鱼被放置在页眉中，而页眉被设置为 position fixed，当下拉菜单只有一级时，这一切都很好。然而，当我添加第二级或第三级时，在任何能够理解 fixed position 属性的浏览器中都会出现严重问题。我可以让所有浏览器使用与 IE 相同的代码片段来定位页眉和页脚，但这会禁用 Gecko 浏览器中的滚轮鼠标。（非常烦人。）
我的问题是。能否将吸盘鱼放在一个 fixed 元素内，或者我花时间用头撞墙是否更有意义？
如果没有确定的答案，我会尝试将 offending 页面放在一起进行评估，如果时间允许的话。如果答案是明确的“否”，那么我认为我需要找到另一种方法。（尽管我不看好我的机会。）
任何帮助或想法都非常欢迎，我一整周没睡了。
提前感谢。
Nathan 于 2004 年 9 月 14 日星期二凌晨 4:16 GMT 如是说。
评论39
--我在 IE 中遇到了一个问题。下拉菜单不是直接向下展开。它是向下并向右展开。--
我的也有类似的问题。对我来说，这是 div 的 CSS 问题。我将文本对齐设置为居中，这使得 IE 在下拉菜单中出现了错误。
Ian 于 2004 年 9 月 14 日星期二晚上 6:06 GMT 如是说。
评论40
又来了。
又一个不眠之夜后，我似乎（希望）解决了之前将吸盘鱼放在固定元素内的那个问题。我突然意识到我忽略了一个简单的上下文变化，现在我想起来了，这似乎是合乎逻辑的。
offending 规则是
#nav li ul {
position: absolute;
}
解决方案
#nav li ul {
position: fixed;
}
但这会一如既往地让 IE 崩溃，所以一定要将 fixed 规则隐藏起来，让它可以使用 absolute 定位。
我希望这没错而且有意义？我仍然需要进一步测试，但到目前为止一切都很好，如果运气好的话，这可能会帮助其他遇到类似问题的人。现在我可以再次入睡了。
Nathan Kelly 于 2004 年 9 月 15 日星期三凌晨 2:32 GMT 如是说。
评论43
应该是
var sfEls = document.getElementById("nav").getElementsByTagName("li");
而不是
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
为了 xhtml Dom 验证
参考
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-5353782642
感谢 [Dave]K: unernet irc #html
Boyd Pearson 于 2004 年 9 月 27 日星期一凌晨 12:02 GMT 如是说。
评论44
在跨浏览器吸盘鱼跨度方面遇到问题？有时你不得不咬紧牙关，说去他妈的 100% CSS 设计。就这样把那个坏家伙用表格处理一下吧
<div class="suckerfish">
<table id="nav"><tr><td>
<ul>
<li><a href="index.html">公司</a>
<ul>
<li><a href="#">我们是谁</a></li>
<li><a href="#">我们做什么</a></li>
<li><a href="#">我们的经验</a></li>
<li><a href="#">认识 Jake</a></li>
<li><a href="#">认识 Pooter</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul>
<li><a href="#">产品</a>
<ul>
<li><a href="#">网站工具</a></li>
<li><a href="#">定制工具</a></li>
<li><a href="#">咨询</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>
您可能需要从 CSS 中删除浮动。但我不认为您需要。
Lucas 于 2004 年 10 月 6 日星期三晚上 10:23 GMT 如是说。
评论45
我正在使用 suckerfish drop downs 的 JavaScript 在 IE 中修复 hover 伪类，在此页面上
http://testmh.clients.nixmc.com/crane/template_home.html
在 Firefox、Mozilla、Opera 中一切看起来都很好，但在 IE 中，当我将鼠标悬停在导航按钮上时，按钮下方会出现一个 2 像素的间隙，这会将它们向下推到页面上。我为此抓狂了一整天，为了修复它，我重写了好几次 CSS，但无论我做什么，间隙仍然存在。这似乎与我在 CSS 中使用的这行代码有关（包括注释）。
#navitems li.first
{
/* required to fix the double margin float bug in IE, but also seems to break the
hover effects by adding 2 pixels space underneath. WTF? */
display:inline;
}
如果有人能弄清楚是怎么回事，那将不胜感激，因为它把我难住了。
Matthew Hill 于 2004 年 10 月 8 日星期五下午 3:33 GMT 如是说。
评论48
我喜欢这个东西，而且我让它工作了，但我在 IE 中遇到了“向下并向右”的问题，但据我所知，我的东西里没有任何 div align 干扰它。而且最糟糕的是，如果我从本地计算机预览文件，下拉菜单会直接向下展开，但上传到互联网后，它会向下并向右展开。在 Firefox 中看起来不错。有人能看看这个出问题的页面吗？
http://twh.telefragged.com/aikido/index2.htm
whitey 于 2004 年 11 月 10 日星期三凌晨 1:17 GMT 如是说。
评论49
算了，忘了它吧，在 #li:hovernav ul 标签中，将 left:auto 设置为 top: auto 标签也可以，而且它能工作。我不确定为什么它能工作，但这正是 Internet Explorer 的优点。
Go Firefox。
whitey 于 2004 年 11 月 10 日星期三凌晨 1:28 GMT 如是说。
评论50
有没有人能发布一个简单的指南，教如何使用 suckerfish hover 在鼠标悬停在图片上时弹出一些文本？
我是一个 CSS 新手，成功地使用 suckerfish 下拉菜单创建了一个菜单系统，但似乎无法解决这个问题。
谢谢，
Brian
Brian Goodman 于 2004 年 11 月 11 日星期四上午 7:07 GMT 如是说。
评论51
更小、更高效的吸盘鱼鱼群
function suckerfish(func, tag, parentId) {
if (window.attachEvent) window.attachEvent("onload", function() {
var elements = parentId == null ? document.getElementsByTagName(tag)
: document.getElementById(parentId).getElementsByTagName(tag);
for (var i = 0; i <lt; elements.length; ++i) func(elements[i]);
});
}
function makeClassToggler(startEvent, stopEvent, classToToggle) {
var re = new RegExp(" " + classToToggle + "\\b"); re.compile(re.source);
var start = function() { this.className += " " + classToToggle;}
var stop = function() { this.className = this.className.replace(re, "");}
return function(e) { e[startEvent] = start; e[stopEvent] = stop; }
}
var sfHover = makeClassToggler("onmouseover", "onmouseout", "sfhover");
var sfFocus = makeClassToggler("onfocus", "onblur", "sffocus");
var sfActive = makeClassToggler("onmousedown", "onmouseup", "sfactive");
备注
~ 当前代码为每个元素创建了两个新的闭包，此代码只为每种吸盘鱼创建两个闭包。
~ 当前代码在 mouseout 触发时创建新的 regexp 对象，此代码创建一个并预编译它。
~ sfHover/sfActive/sfFocus 中重复的代码已合并到一个函数中。
~ target 吸盘鱼实际上是一个完全不同的东西，不应该用这种技术来实现。在我的下一篇文章中将提供一个替代方案。
Blake Coverett 于 2004 年 11 月 15 日星期一晚上 10:47 GMT 如是说。
评论52
function enableTargetPseudoClass() {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var showTarget = function(yes) {
if (location.hash.length) {
var e = document.getElementById(location.hash.substring(1));
if (e) e.className = yes ? e.className + " sftarget"
: e.className.replace(/ sftarget\b/, "");
}
}
document.body.attachEvent("onclick", function() {
showTarget(false);
window.setTimeout(function() { showTarget(true); }, 0);
});
document.body.click()
});
}
}
备注
~ 与其他类型的吸盘鱼不同，对于 :target 伪类，我们已经知道了我们感兴趣的元素的 ID，所以没有理由进行 .getElementsByTag() 并遍历它们。事实上，根本没有理由将其限制在特定标签上。
~ 当前代码错误地在当前时间内添加了 sftarget 类，当 shift+click/在新窗口中打开时，这会成为错误的 target。
~ 与其连接所有链接（其中许多可能不是指向当前页面的链接），不如连接 body.onclick 并让点击事件冒泡到那里就足够了。
~ 代码量更少。
Blake Coverett 于 2004 年 11 月 15 日星期一晚上 10:58 GMT 如是说。
评论53
重读了我最后的两篇帖子，我觉得它们听起来有些生硬 - 我为此道歉。虽然我认为上面的代码是一个有用的改进，但这仅仅是因为 Patrick 和 Dan 首先提出了如此巧妙的想法，我才能对它进行一些修改。
此致，
-Blake
Blake Coverett 于 2004 年 11 月 15 日星期一晚上 11:02 GMT 如是说。
评论54
很棒的下拉菜单，我已经用过几次了。
到目前为止，我还没有解决两个问题。
1：在 Windows 的 IE 和 Firefox 中，我的菜单项之间都有一个 1 像素的间隙，而在 Linux 的 Firefox 中则没有。而且不是每一项都有，而是大约每隔一两项出现一次。
2：是否有办法让每个菜单使用不同的宽度？也许可以根据标签中最长文本的长度来决定。我有一个菜单包含很长的文本字符串，为了让它全部显示在一行上，我现在所有的菜单都变得那么长。
您可以在这里看到这两个问题的示例： http://www.ruffdogs.com
谢谢，你们做得太棒了！
MrCl3an
MrCl3an 于 2004 年 11 月 15 日星期一晚上 11:51 GMT 如是说。
评论55
你好
在 IE 和 Mozilla 中还有一个问题是，当您将 flash 电影放在按钮正下方时。它会将下拉菜单排序到它后面，所以您将看不到菜单上的链接。
Matt Woods 于 2004 年 11 月 25 日星期四凌晨 4:48 GMT 如是说。
评论56
关于 :focus ...
我该如何阻止它给单选按钮应用背景颜色？这一切在文本字段和文本区域上看起来都很棒，但在单选按钮上看起来很糟糕。
sunup 于 2004 年 11 月 26 日星期五凌晨 3:30 GMT 如是说。
评论58
:active 伪类的应用
首先，什么是点击，它何时发生？
点击发生在按下鼠标按钮之后；即鼠标按钮释放之后。
:active 发生在点击之前，即按下鼠标按钮时。
假设您创建一个带有背景图片的锚点元素 <a>。当您按下按钮时，网站访问者会看到一个替代图片，当他再次释放鼠标按钮时，点击发生，他将被带到锚点链接的页面。
这样可以创建非常漂亮的按钮。
想象一下具有三种可能视图的按钮：正常、悬停时、点击时。
也许您应该使用我的按钮创意来更清晰地展示 SuckerFish 示例。
Stef Nighthawk 于 2004 年 12 月 7 日星期二下午 12:31 GMT 如是说。
评论59
我正尝试使用 suckerfish shoal 为一个 div 类在鼠标悬停时切换背景。无论我尝试多少组合，我都无法让 hover 在 IE 中工作。以下是我当前尝试实现代码的方式
CSS
/* 普通 div 类 */
.content_notes_edit {
border: #FFFFFF 1px solid ;
padding: 2px 20px 5px 5px;
margin-left: 15px;
}
/* 悬停时的 div 类 */
.content_notes_edit:hover, .content_notes_edit.sfhover {
background: #F7F7F7 url(images/edit_20_bl.gif) no-repeat top right ;
border: #D1D1D1 1px solid ;
padding: 2px 20px 5px 5px;
margin-left: 15px;
}
Suckerfish shoal 脚本
/* 我尝试了很多变体，但还是无法奏效 */
suckerfish(sfHover, "CLASS", "content_notes_edit");
HTML
请在鼠标悬停在此处时亮起！。
非常感谢帮助新手！
sox_nathan 于 2004 年 12 月 12 日星期日晚上 10:14 GMT 如是说。
评论60
大家好。
我也在使用这个菜单，但我在 IE 中（当然）遇到了一些问题。
子菜单项现在被放置在主菜单项旁边。
但我想让子项（第二个 UL + LI）显示在主项上方。
所以，我只给绝对定位的 UL（子项）设置更少的左边距，这样它就会覆盖第一个 UL。
没问题...效果很好。除了紧随子菜单之后的主菜单项，被放置在了子菜单之上。
我在 UL 上使用了 z-index 来设置子项。
这在所有浏览器中都有效，除了 IE。我似乎无法修复它。紧随其后的主菜单项被放置在了子菜单之上。
请帮忙...
Paul Kruijt 于 2004 年 12 月 15 日星期三下午 2:21 GMT 如是说。
评论61
我为了自己的使用修改了代码。我想我应该把它发布回来，以防其他人需要。
sfHover = function() {
//改为直接索引 NodeList 而不是缓存它。这似乎能提高速度。
for (var i=0; (sfEls = document.getElementById("nav").getElementsByTagName("LI")[i]); i++) {
//改为 onmouseenter 而不是 onmouseover。与 IE 5.5 相关。它提高了
//深度菜单的响应速度。可以编写一个函数来兼容 IE 5.5 以下版本
// 见下文
sfEls.onmouseenter=function() {
this.className+=" sfhover";
}
//改为 onmouseleave 而不是 onmouseout。与 IE 5.5 相关。它提高了
//深度菜单的响应速度。可以编写一个函数来兼容 IE 5.5 以下版本
// 见下文
sfEls.onmouseleave=function() {
//去掉了 new RegExp
this.className=this.className.replace="";
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
鼠标悬停和鼠标移出函数
function Over(el) {
if (!el.contains(event.fromElement))
// MouseEnter
}
function Out(el) {
if (!el.contains(event.toElement))
// MouseLeave
}
为什么需要这个？当用户将鼠标移到每个项目上时，onmouseover 和 onmouseout 事件会在包含元素上触发多次。当样式响应这些事件而改变时，元素的“外观”会不必要地改变。很多，很多次。菜单越大，响应延迟就越明显。
祝您愉快，
Scott。
Scott C. Hughes 于 2005 年 1 月 8 日星期六凌晨 12:02 GMT 如是说。
评论62
有人在处理旧 Mac 吗？下拉菜单在上面会变得很奇怪。我愿意接受一个粗糙的 hack 来修复它……有什么想法吗？
Nick 于 2005 年 1 月 25 日星期二晚上 8:17 GMT 如是说。
评论63
有没有人设法让项目使用交替的背景颜色（例如，在两种颜色之间切换）？这可能会有所帮助，并使下拉菜单更易读。
Antonio 于 2005 年 1 月 25 日星期二晚上 10:08 GMT 如是说。
评论64
sfTarget 在 IE6/Win 上对我来说似乎不起作用。
这行代码似乎是错误的
sfEls[i].className+=" " + cls;
没有为 'cls' 定义任何内容 - 它从哪里来的？
我把它改成了我认为它应该有的样子
sfEls[i].className+=" sftarget";
但它仍然不起作用。有什么想法吗？
Matt 于 2005 年 1 月 27 日星期四下午 2:51 GMT 如是说。
评论66
好的，我既是个白痴（我忘了将 H2 改为我自己的标签，在这种情况下是 SPAN），但代码中仍然存在一个问题
sfEls[i].className+=" " + cls;
应该是
sfEls[i].className+=" ";
否则您将收到错误，因为 'cls' 既未定义也确实不需要。
于 2005 年 1 月 27 日星期四下午 3:00 GMT 如是说。
评论67
回复 #66
我也遇到了这个 :target 的问题
但是
cls 应该是 "sftarget"
所以那一行将变成
sfEls[i].className+=" sftarget"
如果您只是删除 cls 而不是替换它，那么 .sftarget 样式将不会应用于 URL 中提到的 #。
Stef Nighthawk 于 2005 年 2 月 22 日星期二下午 2:14 GMT 如是说。
评论68
有人能让它与 width: auto （换句话说，不是所有菜单都有完全相同的宽度）一起工作吗？针对主顶层导航项，或 nav li。
Fred 于 2005 年 2 月 24 日星期四下午 3:56 GMT 如是说。
评论69
我在 Internet Explorer 中处理导航 ul li 元素的宽度时遇到了问题。无论我怎么改变，它们总是比 Firefox 中的宽，并且会溢出到另一行。
indi 于 2005 年 3 月 2 日星期三下午 4:27 GMT 如是说。
评论70
我正在使用一个修改版的 SoS 两级下拉菜单，并且相对容易地解决了大多数跨平台浏览器和互操作性问题。不幸的是，我在 IE6 for Windows XP 中遇到了一个显示问题。以以下页面为例
http://www.usd.edu/feedback/feedback.cfm
当您将鼠标悬停在“Academics”菜单上时，它会覆盖页面上的大多数元素；但是，表单选择/下拉菜单会显示在菜单之上。有什么办法可以解决这个问题吗？
Eric 于 2005 年 3 月 7 日星期一晚上 10:54 GMT 如是说。
评论71
你好，我似乎无法打印出我的吸盘鱼下拉菜单，它们在屏幕上显示了出来。当我这样做时，无序列表就会被打印出来。有什么建议吗？
Andy 于 2005 年 3 月 16 日星期三晚上 7:09 GMT 如是说。
评论72
Suckerfish 很棒。你们应该为微软写代码。拥有超过 10,000 名开发者，而 IE 是他们能想出的唯一的东西。可悲。
Peter 于 2005 年 3 月 22 日星期二下午 1:18 GMT 如是说。
评论73
onmouseout 在 IE 6 中不起作用。我在所有浏览器中都让 suckerfish hover 模拟 JavaScript 工作正常，除了 IE 6。onmouseout 事件不起作用。下拉菜单（第二级）在 onmouseout 事件后仍然显示。不知道该怎么办。
Tim 于 2005 年 4 月 4 日星期一下午 3:44 GMT 如是说。
评论74
Suckerfish 对我来说工作得非常好。我看到的一个问题是布局问题。由于顶层列表是浮动的，这意味着如果浏览器窗口大小发生变化，列表就会堆叠在一起。事情变得有点复杂。我决定为了防止这种情况发生，将每组顶部/子链接分成自己的表格单元格。这样就解决了顶部链接堆叠的问题。
在 Firefox 中工作得非常好。我遇到了多个问题，因为 IE 无法理解多个元素具有相同的 ID。那么有没有办法用类来创建这个呢？
- Tony
Tony Bianco 于 2005 年 4 月 13 日星期三凌晨 12:12 GMT 如是说。
评论75
优秀的下拉解决方案。我不是 JavaScript 专家，所以我有一个问题。有没有一种简单的方法可以让这些下拉菜单使用 OnClick 而不是 onMouseover 和 onMouseout？我在其中一个列表中放置了一个搜索表单（输入关键字然后按 Go）。当我鼠标悬停在“Search”菜单选项上时，搜索表单会出现。然后，当我从鼠标切换到键盘输入关键字时，我的鼠标有时会滑出菜单选项，我就会丢失列表的内容，从而无法在表单中输入搜索条件。或者，我是否试图从这段代码中获得超出它预期范围的功能？谢谢。
Julie 于 2005 年 4 月 14 日星期四下午 2:38 GMT 如是说。
评论76
致所有 CSS 达人。我刚发现……的盒模型 hack
voice-family: "\"}\"";
voice-family: inherit;
这不幸地增加了代码行数，并且要进行大量的额外工作才能获得这样一个非常小的修复。这意味着所有带有此盒模型 hack 的文件，其 padding、border 和 width 总计的测量值将在 IE 6 中失效。
签名为“CSS BUFF” Tony！
Tony Bianco 于 2005 年 4 月 14 日星期四晚上 9:18 GMT 如是说。
评论77
糟糕，我的评论 #76 没有完全传上来……请看 Sitepoint 的完整文章。太精彩了，不容错过。基本上，您需要使用条件注释来隐藏一个不同版本的样式表。这篇文章在 CSS Sitepoint 论坛中，标题是：“盒模型 hack 的终结”。
- Tony
Tony Bianco 于 2005 年 4 月 14 日星期四晚上 9:28 GMT 如是说。
评论80
有人解决闪烁问题了吗？？
问题发生在 IE 中，当用户将临时 internet 文件设置设置为“每次页面加载时检查新页面”时。在 IE 中，转到工具 > 选项 > 设置：选择第一个按钮，看看我每次查看带有图片的 CSS 下拉菜单时看到的东西。
Apparently a lot of IE users have this option selected. I did, and didn't even know it. If someone could find a workaround I would be eternally grateful.
于 2005 年 5 月 5 日星期四晚上 7:16 GMT 如是说。
评论81
有人解决闪烁问题了吗？？
问题发生在 IE 中，当用户将临时 internet 文件设置设置为“每次页面加载时检查新页面”时。在 IE 中，转到工具 > 选项 > 设置：选择第一个按钮，看看我每次查看带有图片的 CSS 下拉菜单时看到的东西。
Apparently a lot of IE users have this option selected. I did, and didn't even know it. If someone could find a workaround I would be eternally grateful.
steve 于 2005 年 5 月 5 日星期四晚上 7:16 GMT 如是说。
评论82
下拉菜单很棒，而且能救命，但是……
在 IE 6.0 中，它们似乎直到整个页面加载完毕才激活；而如果页面上有图片，这可能需要一段时间。在此之前，菜单是可见的，但下拉菜单不起作用。请看 http://www.cardbox.com/index.htm 作为示例。
这显然是因为 IE 中与 onLoad 相关的功能。 (Mozilla Firefox 工作正常)。
有人找到解决办法了吗？
Martin Kochanski 于 2005 年 5 月 9 日星期一上午 8:57 GMT 如是说。
评论84
Tony
Tantek 的（讨厌的）voice-family hack 的等效项是（这里是 font-size: small; ）
* html class/id/tag { font-size: x-small; f\ont-size: small; }
它还能避免“必须为 Opera 添加额外的规则”的烦恼。
条件注释的使用可能很有用，但我更愿意利用浏览器 bug 来达到目的，而不是过度重复。
请参阅 http://centricle.com/ref/css/filters/ 了解 hack 的表格。审慎使用各种注释 hack 可以产生奇妙的效果，例如
/* 所有浏览器 */
tag { property: value; }
/* 仅限 NN4 */
/*/*//*/
tag { property: value; }
/* */
/* 不是 NN4 (两次，只是为了好玩，但可能需要更精细地控制特定媒体) */
/*/*/@media all{
tag { property: value; }
}/* */
/* 仅限 IE */
* html tag { p\roperty: MacIE value; /* \*/ property: WinIE<6 value; p\roperty: WinIE6 value; */ }
Phil 于 2005 年 5 月 26 日星期四下午 3:22 GMT 如是说。
评论85
只是想留个言，说我喜欢这种技术。我在我的网站上使用了它，而且非常容易实现。我喜欢它的原因是因为下拉菜单的 X 轴位置总是相对于其父元素。通常我们使用 YPDropDownMenus，而我们需要水平重新定位菜单。这总是会给 IE 带来滚动条，而其他浏览器没有，导致我们的下拉菜单对其他浏览器来说偏离了大约 20 像素。感谢发布这篇文章。
Chet 于 2005 年 5 月 31 日星期二下午 2:37 GMT 如是说。
评论86
我正在尝试让 Suckerfish 下拉菜单真正易于访问，但收到了关于事件处理器的 Bobby 错误……我需要将 onmouseover 和 onmouseout 事件替换为 onfocus 和 onblur 以适应不同的输入设备。但是函数不起作用了。
有人能帮帮我吗？
Bungle 于 2005 年 5 月 31 日星期二下午 3:36 GMT 如是说。
评论87
我感觉有点头晕，试图让它在 IE6 中对我起作用。
如果有人不介意看看--http://www.cthotspots.com/test/hotspots3.html
我知道代码的其他部分写得很糟糕——我的大部分代码都集成自他们的旧网站，不幸的是，预算原因不允许进行我希望进行的重新设计或代码更改。
样式和脚本都在页面中，方便检查。
非常感谢所有花时间查看此内容的人 - 我将不胜感激。
David Streever 于 2005 年 6 月 23 日星期四晚上 11:38 GMT 如是说。
评论88
我想使用 :target 方法从一个框架中的链接跳转到另一个框架中突出显示文本。有人能告诉我如何将代码分割到两个页面以实现此目的吗？
Avi Craimer 于 2005 年 7 月 5 日星期二下午 5:10 GMT 如是说。
评论89
我真的很喜欢这种创建下拉菜单的方法，并且正在我目前的一个网站上实现它。我唯一的问题是，我使用的是图片作为主要触发器，并且无法弄清楚如何阻止它也应用一个 rollover 颜色。有人知道如何阻止将 rollover 颜色应用于图片吗？
Chad 于 2005 年 7 月 8 日星期五下午 3:50 GMT 如是说。
评论90
大家好，
我找到了一种方法，可以摆脱额外的脚本和一些必要的浏览器嗅探：通过动态属性附加 focus/blur 事件。以下是它的工作原理概述
.whatever {
background: #808080;
}
.whatever:focus, .whateverfocus {
background: #eaeaea;
}
.whatever {
behavior: expression(
this.onfocus = function() { this.className += ' whateverfocus'; },
this.onblur = function() { this.className =
this.className.replace('whateverfocus', ''); });
}
这是我的一篇关于此事的博客文章
http://stilbuero.de/blog/2005/07/whateverhover-fast-and-easy.html
Klaus Hartl 于 2005 年 7 月 12 日星期二下午 1:11 GMT 如是说。
评论91
我正在为我正在开发的一个新网站第一次使用这个。我喜欢它的工作方式。我的问题是它在 IE 中工作得很好，但在 Netscape 中不行。也许我需要改变一些东西。我将很多 size 属性从 em 改成了 px。我不知道这是否有影响。
在 http://iccgie.winstemp.com/aboutus_history.asp 查看。
我在 IE6 中（完美）和 Netscape 7 中（不正常）都尝试过。
Nick Elliott 于 2005 年 7 月 25 日星期一上午 8:55 GMT 如是说。
评论92
大家好！
1) 我正在尝试总结此代码的各种变体，使其能在 Mac 上工作，但我迷失了！
所以，有人能帮我（而且可能还有其他人）发布一个这些变体的“最新状态”吗？
2) 我有一个技术/理论问题。为什么这段代码在 Firefox 和 Geko 浏览器中不起作用？
我的意思是，它是为 IE/win 定制的，而在 Geko 和 opera 浏览器中，它正常使用 css 伪类 :hover。但如果我也想在这些浏览器中使用仅限 javascript 的 sfhover 类，我在 Firefox（例如）中看到子菜单项在鼠标指针离开我想“打开”（显示子项）的项目后仍然冻结（打开）。
我不是 JavaScript 专家，你们怎么能有如此耐心向我解释？
非常感谢！
Paolo Candelari 于 2005 年 7 月 26 日星期二下午 6:30 GMT 如是说。
评论93
我忠实地将吸盘鱼鱼群代码复制到了我的网页中，用于菜单和 hover 功能。除了 IE 之外，一切都工作得很好。虽然页面在 IE 中工作正常，但我会收到以下错误通知
Error: 'document.getElementbyId(...)' is null or not an object
Code: 4
我在页面中的三个地方使用了吸盘鱼
suckerfish(sfHover, "LI", "nav");
suckerfish(sfHover, "LI", "contentpop");
suckerfish(sfHover, "LI", "footpop");
这对我来说是一个烦恼，因为 IE 6.0 在页面左下角有一个错误通知符号，但对于旧版本来说，这会阻止页面加载以显示错误消息。
有什么关于纠正这个问题的建议吗？
谢谢，
Brian
Brian Goodman 于 2005 年 7 月 28 日星期四晚上 9:14 GMT 如是说。
评论94
看起来很棒。我在 focus 上遇到一点小问题。我的代码是
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA");
suckerfish(sfFocus, "SELECT");
我的字段是
Fixed < input name="RentperAnnum" value="1" size=10 onblur="this.value=formatCurrency(this.value)"> per annum plus GST being ....
发生的是 focus 按预期改变了，但当我通过 tab 键离开字段时，我的 onblur 没有触发来格式化字段内容。我怀疑这被
sfEls[i].onblur=function() { this.className=this.className.replace(new RegExp(" sffocus\\b"), ""); }
覆盖了。有什么想法如何解决这个问题。
如果这是一个简单的问题，我很抱歉，但我不是 JavaScript 或正则表达式专家。
Kezza 于 2005 年 8 月 8 日星期一上午 8:33 GMT 如是说。
评论95
问题：我正在使用 shoal 来驱动“假的工具提示”（在 :hover 时显示 span，请参见 www.communitymx.com）一系列位于表格中的日历链接。
FF 喜欢 a:hover 并且 z-index 为 10，并且 body 或 a 没有声明 z-index。
IE 中的问题是，工具提示 hover spans 出现在相邻的 a 链接下方。它们应该在上面。
我尝试了 body、a 和 a:hover 的各种 z-index 组合，但没有任何效果能修复 IE。相邻的 a 总是显示在上面。真是的。
救命！
Barry 于 2005 年 8 月 11 日星期四晚上 8:14 GMT 如是说。
评论96
我再次出现。我找到了一个假的工具提示，它甚至不需要 shoal 也能在 IE 中工作。它是纯 CSS。看看
http://www.psacake.com/web/jl.asp
我稍后会弄清楚为什么它能工作。Suckerfish 仍然是我的菜单栏的王者。
谢谢。
Barry 于 2005 年 8 月 11 日星期四晚上 8:33 GMT 如是说。
评论97
有没有办法让可变下拉菜单更好地间隔开？我使用了 succerfish，希望得到类似这样的效果
menu1 menu2 menu_3_is_long
sub_menu_3
longer_sub_menu_3
really_longer_sub_menu_3
似乎“menu1”、“menu2”和“menu3”将由 css 伪类间距驱动
如果有人知道如何在 CSS 中实现上述功能（看起来第一行需要与下拉菜单不同的间距规则，但由于我们是子类化相同的元素……）
嗯，也许我们需要伪类化其他东西？
blake 于 2005 年 8 月 26 日星期五晚上 6:39 GMT 如是说。
评论98
喜欢 suckerfish shoal。我似乎有一个问题，这可能是一个快速修复。
我想在按钮上使用 sfHover，但在文本框上不用。由于按钮和文本框都是 INPUT 标签... 它们在设置时执行相同的操作：“suckerfish (sfHover, "INPUT" );
设置父 ID 实际上也不是一个选项，因为表单相当复杂（文本框和按钮），很快就会变得像一团糟。
我尝试在按钮上使用类并使用：suckerfish (sfHover, "INPUT", "class" ); 但那也不起作用。（假设因为它不是父元素）。
所以我的问题是
有没有办法使用 suckerfish shoal 来隔离文本框和/或提交按钮？
谢谢
Dave Gregory 于 2005 年 8 月 30 日星期二凌晨 12:23 GMT 如是说。
评论99
哦，只是为了澄清……当我说是快速修复时……我指的是可能是我不理解或没弄清楚的东西。 ;)
再次感谢！
Dave Gregory 于 2005 年 8 月 30 日星期二凌晨 12:24 GMT 如是说。
评论100
我遇到了一个与 Dave（帖子 98 & 99）类似的问题……只是在一个表格中。我正在使用它来在悬停单元格时将其点亮（更改背景颜色）。
但我只希望某些单元格点亮。我已经用类（class="normal", class="selected" 等）隔离了单元格，并且诸如边框和背景之类的其他 CSS 效果在不同的类上都能正常工作。
但如何在“suckerfish”中隔离它们？我尝试了许多方法……但似乎无法弄清楚。
Jakob Larsen 于 2005 年 8 月 31 日星期三晚上 9:31 GMT 如是说。
评论101
嗨。您的 CSS 作品非常好，非常感谢。
如果您想看我是如何“滥用”吸盘鱼下拉菜单的，我有一个网页：
http://www.ekstasis.net/index3.php
我读了一些关于 IE/Mac 的评论——它不起作用，但谁在乎呢？它在 Safari 中工作正常。A list apart 也有关于 IE Mac 的有用信息
http://www.alistapart.com/articles/ie5mac
我还没有调查 Nick 的评论
...
请参阅 http://centricle.com/ref/css/filters/ 了解 hack 的表格。审慎使用各种注释 hack 可以产生奇妙的效果，例如
/* 所有浏览器 */
tag { property: value; }
/* 仅限 NN4 */
/*/*//*/
tag { property: value; }
/* */
/* 不是 NN4 (两次，只是为了好玩，但可能需要更精细地控制特定媒体) */
/*/*/@media all{
tag { property: value; }
}/* */
/* 仅限 IE */
* html tag { p\roperty: MacIE value; /* \*/ property: WinIE<6 value; p\roperty: WinIE6 value; */ }
mat 于 2005 年 9 月 14 日星期三下午 3:59 GMT 如是说。
评论102
我正在为我正在开发的一个网站创建一个菜单栏。我基本上是从这个页面复制了大部分代码并将其集成到我自己的网站中。
我复制了代码并做了两个菜单栏。一个在页面顶部，另一个在动态内容表格下方。不深入细节的话，它在 Firefox 中基本可以工作，但在 Windows XP 的 IE 6 中则不完全行。
其中一个菜单栏渲染完全正常（底部），而顶部菜单栏在 IE 中根本不高亮显示。正如您所料，一切在 Firefox 中都渲染得很好。
我为每个菜单制作了单独的样式表，也为每个菜单栏制作了不同的 JavaScript。我仍然无法让 IE 高亮显示顶部菜单栏。
有什么想法或建议吗？
Danny 于 2005 年 9 月 15 日星期四下午 3:57 GMT 如是说。
评论103
猜猜怎么着？又一个新手在问他并不完全理解的问题！
我在这个地址制作了一个样式化的菜单版本：http://www.geocities.com/koolkevinskorner/son.html，它工作得天衣无缝。附带的 CSS 和 Javascript 文件在此地址：http://www.geocities.com/koolkevinskorner/style.css; http://www.geocities.com/koolkevinskorner/menu.js.
问题是当我尝试将菜单集成到我网站的这个地址时：http://www.geocities.com/koolkevinskorner/3columns.html. 当我滚动到一个列表项时，菜单会正常显示，但如果我尝试滚动到一个下拉列表项，它就会消失。
附带的 CSS 和 Javascript 文件在此地址：http://www.geocities.com/koolkevinskorner/3columns.css; http://www.geocities.com/koolkevinskorner/test.js. 不幸的是，Geocities 不托管 .vbs 文件，所以代码在这里全部展示。页面在没有 vbscript 文件的情况下也有同样的问题，所以它可能没有区别；它只是为了页面上的一个时钟。
timerID = null
timerRunning = false
sub stopTimer
if timerRunning then
clearTimeout timerID
timerRunning = false
end if
end sub
sub startTimer
stopTimer
runClock
end sub
sub runClock
Dim rgdow,rgmoy
rgdow = Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
rgmoy = Array("January","February","March","April","May","June","July","August","September","October","November","December")
t_time = Now()
alltime.innerText = t_time
dow.innerText = rgdow(weekday(t_time)-1)
moy.innerText = rgmoy(month(t_time)-1)
dom.innerText = day(t_time)
yr.innerText = year(t_time)
TimerID = setTimeout("runClock",1000,"vbscript")
timerRunning = true
end sub
任何帮助都将不胜感激。谢谢，伙计们。
kev 于 2005 年 9 月 29 日星期四下午 12:34 GMT 如是说。
评论105
我以为我成功地在我正在开发的网站上实现了吸盘鱼，并在下拉菜单下方添加了 Google adsense。它在 IE 中工作得很好，但在 Firefox 和 Netscape 中，当光标触摸到下方 adsense 链接的区域时，下拉菜单就会消失。请参见 www.thechristmassite.ukdining.co.uk/ski.php。
我尝试更改 z-index 但似乎没有什么改变。Adsense 是 JavaScript 代码。
有人能帮忙吗
Nick 于 2005 年 10 月 12 日星期三晚上 10:09 GMT 如是说。
评论106
我正在设计一个网站，我想在此实现此方法。但是，我希望定位如下工作：
用户鼠标悬停在 item1.0.0 上，显示 item 1.1.0、1.2.0 等等直接在 item1.0.0 下方，并将 item 2.0.0、3.0.0、4.0.0 等等向下移动以适应 1.1.0 等所占用的空间。然后，在鼠标悬停在 1.1.0 上时，我希望一个包含 1.1.1、1.1.2 等的菜单出现在右侧。有什么想法吗？我认为这只是一个简单的 CSS 修复，但我可能是错的。
谢谢
Jason
Jason 于 2005 年 10 月 26 日星期三晚上 7:15 GMT 如是说。
评论107
我喜欢吸盘鱼下拉菜单的想法！我想知道是否有地方可以解释“Son of Suckerfish”中使用的 JavaScript？
Steve 于 2005 年 11 月 2 日星期三下午 5:56 GMT 如是说。
评论108
隐藏菜单会不会是个好主意，先用 JavaScript？那样的话，不支持它的浏览器会显示菜单，网站就可以浏览了。例如，使用当前版本，禁用 JS 的 IE 将不会显示菜单，因为 CSS 已经隐藏了它，但无法将其恢复。
Bart Feenstra 于 2005 年 11 月 8 日星期二下午 3:03 GMT 如是说。
评论109
我在此页面上应用了 suckerfish 菜单，但遇到了一个与 CSS 相关的问题。有人能告诉我为什么我的导航栏没有一直延伸到页面的末尾吗？
在 IE 中是这样的，但在 Firefox 和 Opera (PC) 或 Safari、Firefox 和 Opera (Mac) 中却不是。
这个栏应该是实心的橙色条，但它提前停止了。
http://aadezyn.com/TRI/Templates/
如果有人知道解决方案，我将非常感激。
提前感谢。
Alex 评论于 2005 年 11 月 9 日星期三 凌晨 12:04 GMT。
评论110
大家好，
有人知道如何将 suckerfish 的 :focus 属性应用于 CSS 类（而不是 HTML 元素）吗？我在 Firefox 中成功地做到了这一点，但将其应用于“input”显然会将其应用于页面上的所有 input 标签。
谢谢
Chris
Chris 评论于 2005 年 11 月 24 日星期四 下午 7:35 GMT。
评论111
您好
任何在处理消失的列表（例如在其他元素之上）时遇到无法解决的问题的人，可能想尝试将表格（无 cellspacing/cellpadding）放在每个 li 标签周围（并提高 ul 的 z-index）。
Rab 评论于 2005 年 12 月 6 日星期二 下午 12:30 GMT。
评论112
您好！
我正在尝试解决 IE 的 select 框显示在完美的 suckerfish 下拉菜单之上的老问题（因为它们的 z-index 行为不佳）……我一直在使用类似的方法
http://homepage.mac.com/igstudio/design/ulsmenus/vertical-uls-iframe.html
（有关更多讨论，请参阅 http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/Select-tag-overlap-in-IE）。
这效果很好，但我们的菜单非常庞大，在页面加载时加载所有这些 iframe 需要很长时间而且是不必要的。因此，我正在尝试将其改编为按需加载 iframe，并对 JavaScript 进行了一些修改。我不明白为什么下面的代码不起作用……有人有什么想法吗？（二级菜单会出现，但不知何故鼠标悬停事件无法正确触发以加载下面的菜单）。任何想法都将受到赞赏。
Martin 评论于 2005 年 12 月 28 日星期三 下午 5:08 GMT。
评论115
我喜欢下拉菜单，特别是只有 12 行 JavaScript 的那些。我为一位拥有大量导航链接的客户检查了大量的潜在解决方案。下拉菜单便于维护。感谢您编写了如此出色的代码。
Solomon Rothman 评论于 2006 年 2 月 26 日星期日 上午 8:43 GMT。
评论116
我喜欢“sons of suckerfish”下拉菜单解决方案……但与 .htc 方法相比，它做得不好的一点是，当我在第二个弹出菜单上悬停时，suckefish 不会突出显示父项。
有没有办法在用户访问第二个弹出菜单时同时保留父项的焦点？
也许这可以用简单的 JavaScript 解决方案来修复……但我没有 JavaScript 天赋！！！ :(
djray 评论于 2006 年 3 月 9 日星期四 凌晨 12:48 GMT。
评论117
您好！
我正在尝试做一些我不真正理解的事情，当我发现它在 IE6 中工作正常时，我以为我搞定了，但当我用 FF 1.5 查看它时，它却不起作用。
我的尝试可以在 http://mydigitalhome.com.au. 看到。所有 CSS 文件都可以在源文件中找到，所以如果有人有任何想法，我很乐意听取。
Laurie Lewis 评论于 2006 年 3 月 19 日星期日 上午 10:53 GMT。
评论118
抱歉，
我不得不移动第 117 条消息中指示的文件的位置。
现在可以在以下位置找到： http://www.mydigitalhome.com.au/menu/Menus.html
Laurie Lewis 评论于 2006 年 3 月 19 日星期日 下午 9:45 GMT。
评论119
IE Mac 的快速粗糙解决方案 - 不好看 - 但确实有点用
找到了一个让它在 IE Mac 上工作的办法，以及仍然使用它的 14 个人，运行起来像乌龟，但总比没有菜单好。
PS：伙计们，干得漂亮
if (window.attachEvent){
window.attachEvent("onload", sfHover);
} else {
// for IE mac
if (document.all && document.getElementById) window.onload=sfHover;
}
Overworked code monkey 评论于 2006 年 3 月 28 日星期二 下午 10:45 GMT。
评论120
大家好。我正在尝试使用 suckerfish 来为 IE 中的 DIV 实现 :hover 效果。
这是 DIV
#main {
position:absolute;
left:25px;
top:176px;
width:475px;
height:363px;
z-index:4;
overflow: auto;
border: solid;
border-width: thin;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-color: #FFFFFF;
border-top-color: #FFFFFF;
}
这是悬停效果
#main:hover, main.sfHover { border-color: #8DC313; background-color: #EBEBEB }
这是 JavaScript
sfHover = function() {
var sfEls = getElementsByTagName("DIV");
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);
我哪里做错了？:/ 请帮帮我。
-提前感谢
Alex 评论于 2006 年 4 月 16 日星期日 下午 10:05 GMT。
评论121
Martin，
检查 z-index。在你的 JavaScript 中，确保将元素的 z-index 设置得比 iframe 的高。我在这方面遇到了一些麻烦，最后做了如下操作：
ieMat.style.zIndex="-1"; // iframe。
ieULs[j].style.zIndex="101"; // ul
我遇到了和你一样的问题，二级菜单会出现，但鼠标悬停事件不会触发。这个解决了它。
你可以在 http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-ii 看到新版本。
顺便说一句，如果你有如此庞大的菜单结构，你可能需要重新考虑并将其分成更小的块。
Tanny O'Haley 评论于 2006 年 4 月 26 日星期三 上午 5:06 GMT。
评论122
大家好，我一直在构建一个网站，并且我正在使用 suckerfish 来实现 :hover 修复……但我遇到了这个奇怪的问题……当代码到位时，网站在 IE、Firefox 中显示正常，但当我用 Safari 测试网站时，页面根本没有任何显示（我使用的是最新版本的 Safari）。这是我正在使用的代码副本。如果有人能提出一些建议来解决这个问题，请帮助我。
如果你想了解我在做什么，可以访问 www3.sympatico.ca/keroberts/gallery.htm
Jamie Roberts 评论于 2006 年 7 月 6 日星期四 下午 6:03 GMT。
评论124
有人研究过这个小技巧在 IE 中的性能影响吗？我只是用它来突出显示数据表中的行（没有下拉菜单或其他效果）。只想在鼠标悬停时突出显示一行。它在 IE6 中工作正常，但在鼠标悬停时（仅限 IE6），CPU 使用率会大幅上升（表格包含大约 300 行）。与 Firefox 相比，响应也相当迟缓。在 Firefox 上没有明显的性能影响。（两者目前仅在 Windows 上测试。1.4Ghz，512Mb RAM）。
Rory 评论于 2006 年 9 月 6 日星期三 上午 2:12 GMT。
评论126
我喜欢 :focus 脚本并想使用它，但它给我带来了一些问题。我有一个搜索框，上面已经有一些 onfocus 代码。该字段的默认值为“Search...”，在聚焦时会被移除。在失去焦点时，如果字段为空，则会重新设置为“Search...”。在 Firefox 中看起来很棒，并添加了 :focus 样式。但在 IE 中，suckerfish 会覆盖我现有的 onfocus 和 onblur 代码。如果我尝试 .onfocus += yadda yadda，那么它们两者都将不起作用。它根本不起作用。
救命！
Trint 评论于 2006 年 9 月 15 日星期五 下午 6:19 GMT。
评论127
大家好，我叫 Kam，我正在尝试让我的下拉菜单在 Firefox 和 IE7 中正常工作。下拉菜单在 IE6 中工作正常，但在 Firefox 中加载页面时，我只看到我的菜单显示在屏幕上。我花了好几天的时间来解决这个问题，但到目前为止还没有成功。如果有人能看看我的代码并给我一些建议，我将不胜感激。我已包含网址。
非常感谢
Kam
Kam Bhogal 评论于 2006 年 9 月 25 日星期一下午 3:15 GMT。
另请参阅
- 下一页： PTG Interview
- 上一页： Son of Suckerfish Dropdowns
评论1
Dog Blog 的评论现在采用了吸盘鱼 :target 方法 - 如果您选择任何评论编号，或者直接访问 https://htmldog.cn/ptg/archives/000051.php#comment1，您就会看到它的效果。
除非您的浏览器支持 :target 伪类（例如 Safari 1.2 或 Mozilla）或使用了吸盘鱼模拟器（主要是 IE），否则此功能将无法工作。因此，例如 Opera 将无法获得此优势（我相信只要时间允许，CSS3 伪类最终会在后续版本中实现）。使用此类浏览器的用户应该不会损失太多 - 只要不依赖它来完成关键任务即可。
Patrick 于 2004 年 5 月 21 日星期五上午 11:02 GMT 如是说。