CSS將元素滑入頁面上

Question

我的頁面頁腳結構如下：

            <div class="footer-header-links">
                <a href="#">About Us</a>
            </div>
            <div class="footer-hidden-links">
                <a href="#">Overview</a><a href="#">Mission & Vision</a><a href="#">Team</a><a href="#">Contact Us</a>
            </div>

看起來像：

CSS如下：

我想隱藏鏈接（概述，任務和遠景等），僅在“關於我們”上單擊或懸停時才顯示它們-我不知道該怎么做。

我想做的另一件事是，單擊“關於我們”時，將這些鏈接從左側滑入，而不僅僅是使其淡入頁面。

希望找到一個CSS解決方案。

Answer 1

下面是執行相同操作的代碼，請嘗試此操作

<div class="footer-header-links">
    <a href="#" class="aboutUs">About Us</a>
</div>

<div class="footer-hidden-links">
    <a href="#" class="showOnHover">Overview</a>
    <a href="#" class="showOnHover">Mission & Vision</a>
    <a href="#">Team</a></br>
    <a href="#">Contact Us</a></br>
</div>


.showOnHover {
    display: none;
}
.footer-header-links:hover +.footer-hidden-links .showOnHover{
   display`enter code here`: block;
}

Answer 2

要實現懸停時的淡入淡出，可以按照以下方式使用：

.footer-hidden-links{
    opacity: 0;
    transition: opacity 1s;
}

.footer-header-links:hover~.footer-hidden-links{
    opacity: 1;
}

CSS3 transition屬性也可以用於從左側滑動元素（進行一些調整以使樣式處於位置）

過渡：左1s；