【问题标题】: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;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-05-03
      • 2013-04-17
      • 1970-01-01
      • 1970-01-01
      • 2015-01-02
      • 2012-07-25
      • 1970-01-01
      • 2012-06-19
      相关资源
      最近更新 更多