如何隐藏HTML页面上的元素，直到用户将它悬停在使用CSS的位置上？

Question

我想在HTML页面上隐藏一个链接，并且只在用户悬停在它上面时才显示它。我如何使用CSS来做到这一点？

Answer 1

CSS visibility没有工作，但这：

a 
{ 
    text-decoration: none; 
    color: transparent; 
} 

a:hover 
{ 
    color: black; 
} 

Answer 2

HTML：

<div class="hidden"><a href="blah">I can't see this</a></div> 

CSS：

.hidden 
    { 
     width:100px; 
     height:100px; 
     border:1px solid black; 
    } 
    .hidden a{ 
     display: none; 
    } 
    .hidden:hover a{ 
     display:block; 
    } 

但是，这是不是很 '接近'

后编辑测试。

Answer 3

如果你想要链接内的任意代码，比如图片，最好使用opacity属性。

例如：

.hidden { 
    opacity: 0; 
    transition: opacity 0.5s ease; 
} 

.hidden:hover { 
    opacity: 1; 
} 

Codepen：http://codepen.io/team/thinkful/pen/bb52d8326d532c1fbcc72f772a032a20