如何将延迟添加到侧面菜单上？

这是我的HTML代码：如何将延迟添加到侧面菜单上？

<div id="pastIssuesBody"> 
    <ul> 
     <li><a href="#">2017</a> 
     <ul> 
      <li><a href="#">January</a> 
      <ul> 
       <li><a href="/index.php?month=Jan&year=2017">Issue I</a></li> 
       <li><a href="/index.php?month=Jan_second_issue&year=2017">Issue II</a></li> 
      </ul>

这是我的CSS：

#pastIssuesBody ul { 
     margin: auto; 
     padding: 0; 
     list-style: none; 
     width: inherit; 
     font-size: 11.5pt; 
    } 
    #pastIssuesBody ul > li { 
     position: relative; 
     font-size: 11.5pt; 
    } 
    #pastIssuesBody li > ul { 
     position: absolute; 
     left: 50px; 
     top: 0; 
     display: none; 
    } 
    #pastIssuesBody ul > li > a { 
     display: block; 
     text-decoration: none; 
     color: #58595b; 
     background: transparent; 
     padding: 8px; 
     border: none; 
     border-bottom: 0; 
     width: 100%; 
    } 
    #pastIssuesBody ul > li > a:hover { 
     background-color:#f6f6f6; 
    } 
    #pastIssuesBody li:hover > ul { 
     display: block; 
    } 
    #pastIssuesBody ul > li > ul > li > ul { 
     width: 100%; 
     margin-left: 41px; 
     display: none; 
    }

我怎样才能让这个当我上的日期徘徊，有一个轻微的延迟？（当我有一个月的一年出现）这是我的网站：https://today.byu.edu

来源

2017-06-15 Rachel Johnson

“这是我的网站 - 找到我需要帮助的代码的好运气”？ - 请在它自己的问题中创建一个[mcve]。 –

请记住保留您的代码MCVE。 https://stackoverflow.com/help/mcve – victor

只是出于好奇 - 没有看到任何演示我不得不问，为什么你需要延迟？ –

好吧我想通了。原来，显示器不能像那样动画。所以我改变了代码，以便改变它的透明度。

#pastIssuesBody li > ul { 
    position: absolute; 
    left: 50px; 
    top: 0; 
    display: block; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
    opacity: 0; 
} 
#pastIssuesBody ul > li > ul > li > ul { 
    width: 100%; 
    margin-left: 41px; 
    display: block; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
    opacity: 0; 
} 
#pastIssuesBody li:hover > ul { 
    opacity: 1; 
}

编辑：好了，所以这段代码不得不引起其他元素展现出来，当我滚动在该地区的一个错误。希望这是有道理的。我只是将所有内容都改为可见性而不是显示。现在一切都很美妙。

来源

2017-06-16 19:46:22

此外，您可以添加一个'transition-delay：.5s'来获得转换开始之前的实际延迟。 –

如何将延迟添加到侧面菜单上？

回答

相关问题