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如下：

我想隐藏链接（概述，使命和视觉等），只有在点击或悬停在＆＃39;关于我们＆＃39; - 我无法弄清楚如何做到这一点。

我想要做的另一件事是在点击“关于我们”时从左侧滑动这些链接而不是将它们淡入页面。

希望找到一个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过渡属性也可用于从左侧滑动元素（通过一些调整来使你的样式位置）

过渡：离开1s;