Question

对于我的网站，我需要创建一个带链接按钮的菜单，在悬停时可以向下滑动其他链接按钮。

一个平滑的向下/向上滑动面板，当我将鼠标悬停在链接按钮上时向下滑动，当鼠标不是链接按钮或滑动面板中的内容时向上滑动

代码工作我没有错误但是当我悬停链接按钮时，滑动面板就像跳舞一样上下移动而不移动我的鼠标，当我尝试到达其中的内容时有时它有时会关闭。

检查了一些谷歌并找到了与我相同的解决方案，我想我的CSS中的东西

Jquery：

＆＃13;

 $(document).ready(function() {
   $("#nav1").mouseover(function() {
     $("#nav1extender").slideDown("slow");
   });
   $("#nav1").mouseout(function() {
     $("#nav1extender").slideUp("slow");
   });
 });

＆＃13;

.navigator {
  position: fixed !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20vw;
  height: 100vh;
  background-color: #333333;
  z-index: 1;
}
.NavButton {
  position: relative;
  width: 100%;
  text-align: center;
  float: left;
  text-anchor: middle;
  color: white;
  text-decoration: none;
  font-size: 25px;
  left: 0;
  bottom: 0;
  right: 0;
  font-family: 'Arial Unicode MS';
}
.container {
  width: 99vw;
  height: 220vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
  <asp:Panel runat="server" ID="container" CssClass="Container">
    <asp:Panel runat="server" ID="navigator" CssClass="navigator">

      <div style="position:relative;top:10vh;">

        <div id="nav1" style="position:relative;">
          <asp:LinkButton runat="server" ID="NavButton1" CssClass="NavButton" OnClick="NavButton1_Click"></asp:LinkButton>
          <div id="nav1extender" style="position:relative;width:100%;height:100px;display:none;background-color:#333333;z-index:2;top:3px;">
            asd
            <br />asd
            <br />asd
            <br />
          </div>
        </div>

＆＃13;

Answer 1

使用jQuery悬停方法：

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

此方法将同时处理mouseover和mouseout。

所以我用这种方式重写你的代码：

$( "#nav1" ).hover(
  function() {
    $("#nav1extender").slideDown("slow");
  }, function() {
    $("#nav1extender").slideUp("slow");
  }
);

此代码将触发slideUp作为slideDown的回调，并应解决您的问题

悬停时简单的向下滑动面板，在鼠标移动时向上滑动

1 个答案: