Как я могу скрыть элементы на странице HTML, пока пользователь не наведет курсор на нее с помощью CSS?

Question

Я хочу скрыть ссылку на HTML-странице и показывать ее только тогда, когда пользователь наводит на нее курсор.Как я могу сделать это с помощью CSS?

Answer 1

CSS visibility не работает, но это делает:

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

a:hover
{
    color: black;
}

Answer 2

Если вам нужен произвольный код внутри ссылки, например изображение, лучше использовать атрибут opacity.

Например:

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

.hidden:hover {
  opacity: 1;
}

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

Answer 3

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

Но это не очень «доступно»

ИЗМЕНЕНО после выполнения теста.