0

沿边框移动鼠标指针时，此处的 superfish 菜单会闪烁：http ://www.kine-stammheim.ch/ css 文件在此处：http ://www.kine-stammheim.ch/css/navigation/superfish .css

我的猜测是悬停项目的大小与标准不同，这就是它会闪烁的原因。但是我找不到问题...

谁能帮忙？

4

2 回答 2

1

问题是由悬停状态的边距引起的。

这就是我改变的

.sf-menu li {   
margin: 0px;
padding: 5px; /* I added your 5px margin as padding to the li that contains the a. This gave the same effect without confusing the hover state */
list-style: none;
float:left;
background: #536bff;

}

.sf-menu a {
  line-height: 35px; /* I removed 10px of line-height since the li now has a 5px padding */
  padding: 0 15px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  display: block;
}

body#home a#homeNav,
body#ikmethode a#ikmethodeNav,
body#uebermich a#uebermichNav ,
body#contact a#contactNav,
body#anwendung a#anwendungNav,
.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a {
  background: #8398ff url(../../images/bg-top-a-active.png) no-repeat center bottom;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  text-decoration: none;
}

这是一个有效的JSFIDDLE，向您展示最终结果。

于 2013-10-16T14:06:17.720 回答
-1

你试过hoverIntent 插件吗？

支持 hoverIntent 插件。Superfish 自动检测 Brian Cherne 的 hoverIntent 插件的存在，并将其高级悬停行为用于鼠标悬停（鼠标悬停延迟由 Superfish 处理，无论是否存在 hoverIntent）。使用这只是一个选项，但一个不错的选项。此页面上的示例使用 hoverIntent。如果出于某种原因您想在页面上为其他插件使用 hoverIntent 但不希望 Superfish 使用它，您可以将选项 disableHI 设置为 true。重要提示：从 v1.5.1 开始，您必须使用支持事件委托的 hoverIntent 的更新版本 (r7)。

hoverIntent 是一个试图确定用户意图的插件......就像一个水晶球，只有鼠标移动！它类似于 jQuery 的悬停方法。然而，hoverIntent 不是立即调用 handlerIn 函数，而是等到用户的鼠标速度足够慢后再进行调用。

为什么？延迟或防止意外触发动画或 ajax 调用。简单的超时适用于小区域，但如果您的目标区域很大，则无论意图如何，它都可能执行。这就是 hoverIntent 进来的地方......

于 2013-10-14T16:24:14.087 回答