0

所以我有看起来像这样的css：

.dropdown{
position:absolute;  
display: none; 
width: 69%;
background-color: #6f6f6f;
margin-right: 35px;
z-index: 999999999;
padding: 3%;
margin-top: 20px;
}
#nav-menu > li:hover > .dropdown{
display: block;
top:auto;
}

这很好用，但是我想在悬停时使用 jquery easing 插件的效果

我知道有一个显示/隐藏 jquery 功能，但它对下拉菜单的反应不如使用 css 的效果好（下拉菜单在用户与其交互时并不总是保持显示），这似乎每次都有效。

所以我真的只是想为显示添加一个效果：无；然后显示：悬停时的块。如果这很容易，请原谅我，我的 jquery 技能不是很好，我在任何地方都找不到答案

小提琴

小提琴

4

2 回答 2

1

演示

演示2

试试这个

$(document).ready(function () {
$(".menu_right").hover(
  function () {
      $(".dropdown").slideDown();
  },
  function () {
   $(".dropdown").slideUp();
  }
);
});

希望这有帮助，谢谢

于 2013-08-21T17:43:09.220 回答
0

您遇到的问题是，当您在悬停的部分上时，您正在输入子元素，这导致主元素认为您已经悬停了。Jquery 中的解决方案是使用像这样的“悬停”方法：

$(".dropdown").hover(function(){$(this).fadeIn(100);$(this).fadeOut(500);});

第一个函数告诉 JQuery 当你悬停时要做什么，第二个函数告诉你离开它时要做什么，不管有多少子元素嵌套在这个元素中。显然这段代码没有多大意义，因为你不能悬停不在你屏幕上的东西，你必须在元素上应用悬停方法需要对悬停做出反应，并让一些元素嵌套在他里面出现。

<div class="dropDownBtn">
  <div class="subelement"></div>
</div>

在这种情况下，您可以执行以下操作：

$(".dropdown").hover(function(){$(this).find('.subelement').fadeIn(100);$(this).find('.subelement').fadeOut(500);});
于 2013-08-21T15:55:20.737 回答