CSS幻灯片元素融入到页面上哈弗

我有结构化的，就像这样我的页面的页脚：CSS幻灯片元素融入到页面上哈弗

  <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>

它看起来像：

enter image description here

的CSS是如下：

我想隐藏链接（概述，使命&视觉等），只有在'关于我们'有点击或悬停时才会显示它们 - 我无法显示弄清楚如何做到这一点。

我想要做的另一件事是当关于我们被点击而不是将它们褪色到页面时，从左侧滑动这些链接。

希望找到一个CSS解决方案。

下面

来源

2014-10-30 sarovarc

是代码做同样的，试试这个

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

来源

2014-10-30 06:33:23

谢谢你。使用我可以隐藏和取消隐藏链接，你能帮我弄清楚链接从左侧滑入视图的CSS转换吗？ – sarovarc 2014-10-30 06:48:25

要悬停实现淡入淡出，你可以沿着以下的线路使用的东西：

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

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

的CSS3过渡性质也可以用来从左侧滑动你的元素（用一些调整来使你的造型位置）

transition：left 1s;

来源

2014-10-30 06:52:57 roger

CSS幻灯片元素融入到页面上哈弗

回答

相关问题