如何將延遲添加到側面菜單上？

這是我的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'來獲得轉換開始之前的實際延遲。 –

如何將延遲添加到側面菜單上？

回答

相關問題