Question

我试图在悬停时制作slideDown菜单。在悬停HButton3时，我想扩展AccomodationPanel的高度，以便显示其内部的按钮因为延伸但悬停时没有任何反应它看起来像它在元素位置的东西

HTML：

git cherry-pick 123..xyz

CSS：

<asp:Panel runat="server" ID="Header" CssClass="header">
     <div  id="StayOpen" style="z-index:5;">
                   <asp:LinkButton runat="server" ID="Hbutton3" CssClass="HButton" >                
                   </asp:LinkButton>

                   <div id="AccomodationPanel" style ="position:fixed;left:60vw;width:20vw;top:10vh;background-color:#333333;height:0px;overflow:hidden;z-index:10;"  >

                       <asp:LinkButton runat="server" ID="StayOpen1" CssClass="StayOpen" OnClick="StayOpen1_Click" ></asp:LinkButton>
                       <br />
                         <asp:LinkButton runat="server" ID="StayOpen2" CssClass="StayOpen" OnClick="StayOpen2_Click" ></asp:LinkButton>
                        <br />
                        <asp:LinkButton runat="server" ID="StayOpen3" CssClass="StayOpen" OnClick="StayOpen3_Click" ></asp:LinkButton>

         </div>
     </div>
</asp:Panel>

悬停css：

 .HButton {
    position:relative;
    width:20%;
    text-align: center;
    float:left;
    text-anchor:middle;
    color:white;
    text-decoration:none;
    font-size:25px;
    left:20vw;
    bottom:0;
    right:0;
    top:2vh;
    font-family:'Arial Unicode MS';
    z-index:3;
    }        
.header {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100vw;
height:10vh;
background-color:#333333;
-moz-box-shadow:    0 0 3px 1px black;
  -webkit-box-shadow:  0 0 3px 1px black;
  box-shadow:          0 0 3px 1px black;

z-index:4;
position:fixed !important;
position:absolute;
}

Answer 1

#StayOpen的高度为0px。您还必须检查CSS rule priorities。您的代码可能如下所示：

#StayOpen {
    height: 100%;
}
#StayOpen:hover #AccomodationPanel {
    height:300px !important;
}

请看this fiddle。

<强>过渡

在你的问题中，你提到了过渡。您可以在#AccomodationPanel（updated example）中添加：

#AccomodationPanel {
    -webkit-transition: height 2s;
    transition: height 2s;
}

Answer 2

这是因为内联样式优先于样式表样式。如果将内联样式移动到样式表，它将按预期工作。

#AccomodationPanel {
    position:fixed;
    left:60vw;
    width:20vw;
    top:10vh;
    background-color:#333333;
    height:0px;
    overflow:hidden;
    z-index:10;
}

Example

Answer 3

我认为，因为您的#AccomodationPanel具有将height设置为0px并且您的css不会获胜的内联样式。要赢得inline个样式，您可以将!important添加到您的CSS中。例如：

#StayOpen:hover #AccomodationPanel {
    height:300px !important;
}

Pure Css过渡滑动面板不起作用

3 个答案: