Comment puis-je cacher des éléments sur une page HTML jusqu'à ce qu'un utilisateur passe la souris dessus en utilisant CSS?

Question

Je souhaite masquer un lien sur une page HTML et ne l'afficher que lorsque l'utilisateur le survole. Comment puis-je faire cela en utilisant CSS?

Answer 1

CSS visibility ne fonctionne pas, mais cela ne:

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

Mais, il est très 'accessible'

EDITED après un test.

Answer 3

Si vous voulez du code arbitraire à l'intérieur du lien, comme une image, il est préférable d'utiliser l'attribut opacity.

Par exemple:

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

.hidden:hover { 
    opacity: 1; 
} 

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