Question

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

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

谁可以提供帮助？

Answer 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，可以向您展示最终结果。

Answer 2

您是否尝试过hoverIntent plugin？

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

hoverIntent是一个试图确定用户的插件   意图......就像一个水晶球，只有鼠标移动！它很相似   到jQuery的悬停方法。但是，而不是调用handlerIn   立即执行功能，hoverIntent等待用户的鼠标减速   在打电话之前已经足够了。

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

沿着边框移动鼠标指针时，Superfish菜单会闪烁

2 个答案: