Question

虽然创建了一个jQuery下拉菜单，但我遇到了一个最奇怪的问题 - 一个被隐藏的元素仍在影响页面。为什么会发生这种情况，我该如何解决？它通过阻止按钮的一部分来影响功能，迫使人们从未阻塞的部分调用该功能。例如;

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#start").mouseenter(function(){
    $("#box").stop().toggle();
    $("#box").stop().animate({
      top:'50px',
      opacity:'1'
    },400,function(){
    });
  });
  $("#start").mouseleave(function(){
    $("#box").stop().animate({
      top:'25px',
      opacity:'0'
    },400,function(){
    $("#box").stop().toggle();
    });
  });
});
</script> 
</head>

<body>
<button id="start">Start Animation</button>
<div id ="box" style="background:#98bf21;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;">
</div>

</body>
</html>

编辑：如果您看不到问题，请将顶部设置设置为10 px以完全覆盖按钮。

Answer 1

我刚刚使用z-index:-1;为div解决问题Fiddle。当删除此z-index时，按钮的鼠标中心不适用于按钮的下半部分，因为动画div虽然不可见，但却覆盖按钮的一部分。

.toggle（）没有将display设置为none？

1 个答案: