Question

我试图让你的滑块悬停在你尝试去div时，我会将它用于下拉菜单。

  <a href="#" id="toggleLink">Click Here</a>
  <div class="toggledDiv">This is the content of the toggled div</div>
  <div class="alwaysVisible">This is the content of the always visible div</div>

和JS

var toggleState = true;
$('#toggleLink').hover(function () {
if (toggleState) {
    $('.toggledDiv').stop().animate({
        height: 80
    }, 500);
} else {
    $('.toggledDiv').stop().animate({
        height: 0
    }, 500);
}
toggleState = !toggleState;
return false;
});

Answer 1

我使用a.toggleLink上的mouseover来完成此操作以显示div。然后在toggleWrapper的{{3}}上我隐藏了div。如果您不想使用包装div（当您将鼠标悬停在a.toggleLink上时，它会阻止它向上滑动，您可以将$('.toggleWrapper')更改为$('.toggledDiv')

工作mouseleave

旁注，请注意我删除了ID并使用了一个类。我建议更改样式并使用类。

<div class='toggleWrapper'>
    <a href="#" class="toggleLink">Click Here</a>
    <div class="toggledDiv">This is the content of the toggled div</div>
</div>
<div class="alwaysVisible">This is the content of the always visible div</div>

然后将样式更改为：

.toggleLink{
  display:block;
  width:100%
}

的JavaScript

$('a.toggleLink').mouseover(
    function () {
        $('.toggledDiv').animate({height: 80}, 500);
    }
);                 

$('.toggleWrapper').mouseleave(
    function(){
        $('.toggledDiv').stop().animate({height: 0}, 500);
    }
);

jQuery下载悬停在Div上（不只是链接）

1 个答案: