如何隱藏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