Question

这是我的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

Answer 1

好的我明白了。事实证明，显示不能像那样动画。所以我改变了代码，以便改变它的不透明度。

#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;
}

编辑：好的，所以这段代码有一个错误，当我滚动区域时会导致其他元素出现。希望有道理。我只是改变了一切，而不是显示。一切都很美妙。

如何添加延迟以悬停在侧边菜单上？

1 个答案: