CSS在悬停时将元素滑入页面答案

【问题标题】：CSS Slide Elements Into Page on HoverCSS在悬停时将元素滑入页面
【发布时间】：2014-10-30 06:16:07
【问题描述】：

我的页面页脚结构如下：

            <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 解决方案。

【问题讨论】：

标签： html css animation transition

【解决方案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;
}

【讨论】：

谢谢伙计。使用它我可以隐藏和取消隐藏链接，你能帮我找出链接从左侧滑入视图的 CSS 过渡吗？

【解决方案2】：

要在悬停时实现淡入，您可以使用以下内容：

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

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

CSS3 过渡属性也可用于从左侧滑入您的元素（进行一些调整以使您的样式定位）

过渡：左1s；

【讨论】：